KPC
Kevin Powell - Community•3mo ago
curiousmissfox

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 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.
2 Replies
Kevin Powell
Kevin Powell•3mo ago
it checks for the value on the nearest ancestor, so in that example, it would never be true. assuming .child is always inside .parent
curiousmissfox
curiousmissfoxOP•3mo ago
Thank you for confirming!

Did you find this page helpful?