3 replies

Style queries - inherited and changed

Was watching KPows latest video on style queries. I’m confused on how it works when custom properties are changed further down the cascade. If we aren’t defining a container, does it just look for the custom properties value on the elements nearest ancestor ?

For example:

body { —clr: skyblue; }
.parent { —clr: hotpink; }
@container style(—clr: skyblue) {
  .child { color: white; } 
}

body { —clr: skyblue; }
.parent { —clr: hotpink; }
@container style(—clr: skyblue) {
  .child { color: white; } 
}

Would this be true or false?

 —clr

 —clr

IS set to skyblue somewhere in the cascade but the nearest ancestor changed it to hotpink? I’m trying to think of a more practical example but basically just looking for clarification on how these queries work when custom properties are inherited and changed.

KP-C

Kevin Powell - Community•9mo ago•

3 replies

curiousmissfox

Style queries - inherited and changed

body { —clr: skyblue; }
.parent { —clr: hotpink; }
@container style(—clr: skyblue) {
  .child { color: white; } 
}

body { —clr: skyblue; }
.parent { —clr: hotpink; }
@container style(—clr: skyblue) {
  .child { color: white; } 
}

Would this be true or false?

 —clr

 —clr

Style queries - inherited and changed

Similar Threads

Style queries - inherited and changed

Similar Threads

Similar Threads

Similar Threads