CSS style() Queries: How to Query Parent Variables

The CSS style() container query function is a contextual styling feature that allows child elements to adapt their styles based on the computed styles—specifically CSS custom properties (variables)—of a parent container. Unlike traditional media or container queries that evaluate viewport or container dimensions, style() queries evaluate style values. This article explains what the style() query function is, how it enables components to react to parent variable values, and how to implement it using modern CSS.

What is the CSS style() Container Query?

Container queries traditionally evaluate the size of an ancestor element using @container (min-width: ...) or @container (inline-size > ...). The style() query function extends this concept from geometry to design tokens.

Using @container style(), you can query whether a parent container has a specific CSS property set to a specific value. While the specification allows for querying standard CSS properties in the future, modern browser implementations currently focus on querying CSS custom properties (variables).

How style() Queries Parent Variable Values

To query parent variables, an element must evaluate the custom properties set on an ancestor container. CSS custom properties inherit down the DOM tree, and container queries check the computed value of the property on the nearest container that defines it.

1. Defining the Container

Unlike size queries, which require container-type: inline-size or container-type: size, a style query can work on an element defined with container-type: normal (the default) or any container named via container-name. In fact, any element with a custom property can act as a style container without strictly requiring an explicit container-type declaration in supporting browsers.

.card-wrapper {
  container-name: card;
  --theme: dark;
}

2. Writing the @container style() Query

The child element uses the @container rule combined with the style() functional notation to inspect the custom property:

@container card style(--theme: dark) {
  .card-content {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333333;
  }
}

@container card style(--theme: light) {
  .card-content {
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #e0e0e0;
  }
}

If .card-wrapper sets --theme: dark, the child element .card-content receives dark theme styling automatically. If --theme changes via JavaScript or a state class on the parent, the child updates instantly.

Practical Implementation: Boolean and Token-Based States

Style queries are particularly effective for switching component variants using design tokens instead of complex class hierarchies.

<div class="user-profile" style="--variant: compact;">
  <div class="user-card">
    <span class="avatar"></span>
    <p class="bio">Web Developer</p>
  </div>
</div>

.user-profile {
  container-name: profile;
}

/* Default styling */
.user-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

/* Variant applied when parent sets --variant: compact */
@container profile style(--variant: compact) {
  .user-card {
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
  }

  .user-card .bio {
    display: none;
  }
}

Key Characteristics of Style Queries

• Strict Matching: The query evaluates the computed value of the custom property. String matching must be exact; whitespace and casing rules follow standard CSS syntax.
• Separation from Size: You do not need size containment to use style queries. This avoids layout restrictions, such as preventing an element from relying on its children for dimensions.
• Fallback Behavior: If the queried variable is not declared on an ancestor container, the query evaluates to false, and the styles inside the block are ignored.