@container

The @container at-rule has the following syntax:

@container <container-condition> {
  <stylesheet>
}

For example:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

<container-condition>

A set of features that are evaluated against the query container when the size of the container changes. Styles defined in the <stylesheet> are applied if the condition is true.

<stylesheet>

A set of CSS declarations.

Logical keywords can be used to define the container condition:

• and combines two or more conditions.
• or combines two or more conditions.
• not negates the condition. Only one 'not' condition is allowed per container query and cannot be used with the and or or keywords.

@container not (width < 400px) {
  /* <stylesheet> */
}

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) not (height > 400px) {
  /* <stylesheet> */
}

A containment context can be named using the container-name property.

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

The shorthand syntax for this is to use container in the form container: <name> / <type>, for example:

.post {
  container: sidebar / inline-size;
}

In container queries, the container-name property is used to filter the set of containers to those with a matching query container name:

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

Details about usage and naming restrictions are described in the container-name page.

The following descriptors can be used within the container condition:

aspect-ratio

The aspect-ratio of the container calculated as the width to the height of the container expressed as a <ratio> value.

block-size

The block-size of the container expressed as a <length> value.

height

The height of the container expressed as a <length> value.

inline-size

The inline-size of the container expressed as a <length> value.

orientation

The orientation of the container, either landscape or portrait.

width

The width of the container expressed as a <length> value.

Consider the following example of a card component with a title and some text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

A container context can be created using the container-type property, in this case using the inline-size value on the .post class. You can then use the @container at-rule to apply styles to the element with the .card class in a container that's narrower than 650px.

const post = document.querySelector(".post");
const span = document.createElement("span");
span.innerHTML = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
  span.innerHTML = ".post width: " + post.clientWidth + "px";
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

/* A container context based on inline size */
.post {
  container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}

Given the following HTML example which is a card component with a title and some text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

First, create a container context using the container-type and container-name properties. The shorthand syntax for this declaration is described in the container page.

.post {
  container-type: inline-size;
  container-name: summary;
}

Next, target that container by adding the name to the container query:

@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

It's not possible to target multiple containers in a single container query. It is possible to nest container queries which has the same effect.

The following query evaluates to true and applies the declared style if the container named summary is wider than 400px and has an ancestor container wider than 800px:

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

• Container queries
• container-name
• container-type
• contain
• content-visibility