While CSS Container Size Queries (@container (inline-size > 400px)) query the geometric dimensions of a container element, CSS Style Queries (@container style(--property: value)) query the computed styles—most notably CSS Custom Properties (variables)—of the container. This allows child components to adapt their typography, color palette, borders, and layout based purely on the semantic state or theme variable of their enclosing container, eliminating brittle BEM class modifier chains like .card--dark-mode or .card--compact.

The W3C CSS Containment Level 3 specification prioritized CSS Custom Properties (@container style(--variant: elevated)) because custom properties inherit cleanly without triggering cyclic layout dependencies. In contrast, querying standard properties like font-size or margin within a container query could easily cause infinite layout loops (e.g. querying font-size to change font-size). Custom properties represent pure state signals.

When an element defines container-name: card, its descendant elements can query that specific container using @container card style(--status: active). The container query evaluates against the computed value of --status on the container element itself, not on the child. If a child re-defines --status, that new value is not visible to queries targeting the ancestor container, ensuring clean component encapsulation.

Yes. The W3C specification supports boolean conjunctions using and, or, and not. A container query can express compound responsive states: @container (min-width: 450px) and style(--variant: full-bleed) { ... }. Both conditions must evaluate to true on the targeted container for the nested CSS rules to apply.