CSS: @container query

By Xah Lee. Date: . Last updated: .

What is container query

CSS Container Query lets you apply styles to an element based on the width (or other style) of a containing element.

Container Query is like @media query, but based on just a container, not viewport.

Basic example

hello
<div class="box">
 <div class="x">hello</div>
</div>
.box {
 /* this marks .box as a container for query */
 container-type: inline-size;
}

/* this is the container query */
@container (width > 500px) {
 .x {
  border: solid 3px red;
 }
}

/* this means, for any element .x , look at its ancestor elements,
find the nearest one marked as container.
If its width is greater than 500, then apply border. */

Property container-type

property container-type marks an element as a container for container query.

.box {
 /* mark .box as a container */
 container-type: inline-size;
}

what kind of query you can do depends on the value of container-type.

Values for container-type

inline-size

Queries only inline direction. default.

inline-size means width when writing-mode is horizontal, else it means height.

size

Queries both width and height.

style

For style-based queries (e.g., custom properties).

as of 2026-08-09, partial support

scroll-state

for scroll-related queries.

At-rule @container

Use @container at-rule to create a query (a conditional expression), such that when the outer container element is found and its size or other condition is met, apply the style rules in the block.

@container (width > 500px) {
 .x {
  font-size: 1.5rem;
 }
}

/* this means, for the element .x , look at its ancestor elements, find nearest one that is marked as a container (by property container-type).
if the container width is greater than 500, then appy font size.
 */

Property container-name

Container can be named.

Property container-name assign a name to a container.

container-name allows you to query if a element has a named ancestor.

container-name is independent of container-type. You can add the name to any element without container-type.

In the container query line, the @container can immediately followed a name. If so, that name is searched in ancestor elements.

.box {
 container-type: inline-size;
 container-name: mybox;
}

@container mybox (width > 500px) {
 .x {
  border: solid 3px red;
 }
}

Container query by name

you can have a named container without container-type.

in that case, you can use name-only container query.

@container sidebar {
 /* styles that apply only when an ancestor has this name */
 p {
  color: green;
 }
}

Container query length units

These can be used inside container query rules.

cqi

1% of container inline size (width)

cqb

1% of container block size (height)

cqmin / cqmax

smaller/larger of the two

cqw / cqh

container width/height

Logical operators

commonly used operators

@container (width > 400px) and (height > 500px) {
 /* some */
}

@container not (width < 300px) {
 /* some */
}

Example. change font size.

@container (width > 30rem) {
 h2 {
  font-size: clamp(1.5rem, 5cqi, 3rem);
 }
}

Example. change widget size

.sidebar {
 container-name: sidebar;
 container-type: inline-size;
}

.main-content {
 container-name: main;
 container-type: inline-size;
}

/* Target specific container */
@container sidebar (width < 300px) {
 .widget {
  /* styles for narrow sidebar */
 }
}

@container main (width > 800px) {
 .widget {
  /* styles for wide main area */
 }
}

With CSS nesting

nested syntax is natural for container query.

.card-container {
 container-type: inline-size;

 & .card {
  /* base styles */

  @container (width > 500px) {
   /* wide styles */
  }
 }
}

Use case

Browser support

supported by all major browsers since 2024.