CSS @container rule

Definition and usage

CSS @container Rules are used to define styles for other elements based on the container's size or style.

Style declarations are filtered based on conditions, and if the condition is true, they are applied to the container. The condition is re-evaluated when the container's size or style values change.

Tip:In CSS, a container is an element that wraps other elements, used to group them for styling purposes.

Example

Define styles for other elements based on the size or style of the container:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Try it yourself

CSS syntax

@container containername (containerquery) {
  css declarations
}

Attribute value

Browser support

The numbers in the table represent the browser version that first fully supports the @ rule.