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 rudimentary if statements in CSS. [[20251230032945-css-if]]

Note support for this is a lot poorer than regular container queries.

As of late 2025, style queries now support range syntax. e.g.

@container style(--rain-percent > 45%) {
  .weather-card {
    background: linear-gradient(140deg, skyblue, lightblue);
  }
}

[[css]]