Container Style Queries

Container queries let a component adapt to the size of its containing element instead of the viewport. Container style queries extend that same idea one step further: instead of querying a container's dimensions, you query a container's computed style — most commonly the value of a custom property set somewhere up the ancestor chain.

Establishing a container

Style queries reuse the exact same container machinery as size queries — an element opts in with container-type (or the shorthand container), and descendants query it with @container. The only difference is what goes inside the parentheses.

CSS

.theme-region {
  container: theme-region / style;
  --theme: dark; /* a plain custom property, set at any point in the tree */
}

The style() syntax

CSS

/* Query whether the nearest container has --theme: dark */
@container style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: #f5f5f5;
    border-color: #333;
  }
}

/* Query for a specific named container and style condition together */
@container theme-region style(--theme: dark) {
  .card__title {
    color: #66b3ff;
  }
}

Use case: theming a component without class-based switching

The classic way to theme a component tree is toggling a class like .dark-theme somewhere near the root and writing every override as .dark-theme .card { ... }. Style queries let a deeply nested component read a theme signal directly from its nearest ancestor container, without every component in between needing to know or care about theming at all.

CSS

/* Somewhere up the tree — could be set by JS, a data attribute
   mapped to a variable, or a media-query-driven value */
.app-shell {
  container: app-shell / style;
  --theme: light;
}
.app-shell[data-theme='dark'] {
  --theme: dark;
}

/* Deep inside the component tree, with zero knowledge of
   how many levels down it is, or how theming is toggled */
.card {
  background: white;
  color: #111;
}

@container style(--theme: dark) {
  .card {
    background: #1e1e1e;
    color: #eee;
  }
}

Boolean-style custom property checks

A common shorthand pattern is querying whether a custom property is simply set at all, treating it like a feature flag:

CSS

/* Matches if --compact-mode is set to anything other than
   its "unset"/initial value */
@container style(--compact-mode) {
  .toolbar {
    gap: 4px;
    padding: 4px;
  }
}

This is a newer, less broadly supported extension of container queries

Plain size-based container queries reached solid, broad browser support first. Style queries were specified as a later extension and landed in engines afterward, so check current browser support (for example on MDN or Can I Use — see [Using Can I Use](/css/caniuse)) before relying on them for anything business-critical, and pair them with @supports feature detection where a graceful fallback matters.

Style queries currently only reliably support checking custom properties, not arbitrary computed style values like color or font-size.
A style query container still needs container-type (or the style value in the container shorthand) declared just like a size query does.
Style and size conditions can be combined on the same container for components that need to react to both.

More creative power from a single selector: [:has() Advanced Patterns](/css/has-advanced).