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; } 
}

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

 —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.

Style queries - inherited and changed

Similar Threads

Similar Threads

Similar Threads