Style queries

Style queries are the second part of the [[container queries]] spec. As container queries let you query the size of a container, style queries let you query any style of the container.

@container style(color: hotpink) {
  .child {
    /* styles to apply when the card container has a color of hotpink */
    /* I.e. change the background to white: */
    background: white;
  }
}

All elements are style containers by default, so they do not need a contain or container-type property on the parent.

This technique can also be used with CSS variables to create redumentary if statements in CSS.

[[css]]