The@containerCSSat-rule is a conditional group rule that applies styles to acontainment context.Style declarations are filtered by a condition and applied to the container if the condition is true.The condition is evaluated when the queried container size,<style-feature>, or scroll-state changes.

Thecontainer-name property specifies a list of query container names. These names can be used by@container rules to filter which query containers are targeted. The optional, case-sensitive<container-name> filters the query containers that are targeted by the query.

Once an eligible query container has been selected for an element, each container feature in the<container-condition> is evaluated against that query container.

Syntax

/* With a <size-query> */@container (width > 400px) {  h2 {    font-size: 1.5em;  }}/* With an optional <container-name> */@container tall (height > 30rem) {  p {    line-height: 1.6;  }}/* With a <scroll-state> */@container scroll-state(scrollable: top) {  .back-to-top-link {    visibility: visible;  }}/* With a <container-name> and a <scroll-state> */@container sticky-heading scroll-state(stuck: top) {  h2 {    background: purple;    color: white;  }}/* Multiple queries in a single condition */@container (width > 400px) and style(--responsive: true) {  h2 {    font-size: 1.5em;  }}/* Condition list */@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {  h2 {    font-size: 1.5em;  }}

Parameters

<container-condition>

An optional<container-name> and a<container-query>. Styles defined in the<stylesheet> are applied if the condition is true.

<container-name>

Optional. The name of the container that the styles will be applied to when the query evaluates to true, specified as an<ident>.

<container-query>

A set of features that are evaluated against the query container when the size,<style-feature>, or scroll-state of the container changes.

Logical keywords in container queries

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 theand oror keywords.

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

Named containment contexts

A containment context can be named using thecontainer-name property.

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

The shorthand syntax for this is to usecontainer in the formcontainer: <name> / <type>, for example:

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

In container queries, thecontainer-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 thecontainer-name page.

Descriptors

The<container-condition> queries includesize andscroll-state container descriptors.

Size container descriptors

The<container-condition> can include one or more boolean size queries, each within a set of parentheses. A size query includes a size descriptor, a value, and — depending on the descriptor — a comparison operator. The queries always measures thecontent box as the comparison. The syntax for including multiple conditions is the same as for@media size feature queries.

@container (min-width: 400px) {  /* … */}@container (orientation: landscape) and (width > 400px) {  /* … */}@container (15em <= block-size <= 30em) {  /* … */}

aspect-ratio

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

block-size

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

height

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

inline-size

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

orientation

Theorientation of the container, eitherlandscape orportrait.

width

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

Scroll-state container descriptors

Scroll-state container descriptors are specified inside the<container-condition> within a set of parentheses following thescroll-state keyword, for example:

@container scroll-state(scrollable: top) {  /* … */}@container scroll-state(stuck: inline-end) {  /* … */}@container scroll-state(snapped: both) {  /* … */}

Supported keywords for scroll-state container descriptors include physical andflow relative values

scrollable

Queries whether the container can be scrolled in the given direction via user-initiated scrolling, such as by dragging the scrollbar or using a trackpad gesture. In other words, is there overflowing content in the given direction that can be scrolled to? Validscrollable values include the following keywords:

none

The container is not ascroll container or otherwise cannot be scrolled in any direction.

top

The container can be scrolled towards its top edge.

right

The container can be scrolled towards its right-hand edge.

bottom

The container can be scrolled towards its bottom edge.

left

The container can be scrolled towards its left-hand edge.

x

The container can be scrolled horizontally towards either or both of its left-hand or right-hand edges.

y

The container can be scrolled vertically towards either or both of its top or bottom edges.

block-start

The container can be scrolled towards its block-start edge.

block-end

The container can be scrolled towards its block-end edge.

inline-start

The container can be scrolled towards its inline-start edge.

inline-end

The container can be scrolled towards its inline-end edge.

block

The container can be scrolled in its block direction towards either or both of its block-start or block-end edges.

inline

The container can be scrolled in its inline direction towards either or both of its inline-start and inline-end edges.

If the test passes, the rules inside the@container block are applied to descendants of the scroll container.

To evaluate whether a container is scrollable, without being concerned about the direction, use thenone value with thenot operator:

css

@container not scroll-state(scrollable: none) {  /* … */}

snapped

Queries whether the container is going to be snapped to ascroll snap container ancestor along the given axis. Validsnapped values include the following keywords:

none

The container is not a scrollsnap target for its ancestor scroll container. When implementing asnapped: none query, containers thatare snap targets for the scroll container willnot have the@container styles applied, whereas non-snap targetswill have the styles applied.

x

The container is a horizontal scroll snap target for its ancestor scroll container, that is, it is snapping horizontally to its ancestor.

y

The container is a vertical scroll snap target for its ancestor scroll container, that is, it is snapping vertically to its ancestor.

block

The container is a block-axis scroll snap target for its ancestor scroll container, that is, it is snapping to its ancestor in the block direction.

inline

The container is an inline-axis scroll snap target for its ancestor scroll container, that is, it is snapping to its ancestor in the inline direction.

both

The container is both a horizontal and vertical scroll snap target for its ancestor scroll container and is snapping to its ancestor in both directions. The container won't match if it is only snapping to its ancestor along the horizontalor vertical axis. It needs to be both.

To evaluate a container with a non-nonesnapped scroll-state query, it must be a container with a scroll container ancestor having ascroll-snap-type value other thannone. Asnapped: none query will match even when there is no scroll container ancestor.

Evaluations occur whenscrollsnapchanging events fire on the scroll snap container. If the test passes, the rules inside the@container block are applied to descendants of the container.

To evaluate whether a container is a snap target, without being concerned about the direction, use thenone value with thenot operator:

css

@container not scroll-state(snapped: none) {  /* … */}

stuck

Queries whether a container with aposition value ofsticky is stuck to an edge of its scrolling container ancestor. Validstuck values include the following keywords:

none

The container is not stuck to any edges of its container. Note thatnone queries will match even if the container does not haveposition: sticky set on it.

top

The container is stuck to the top edge of its container.

right

The container is stuck to the right-hand edge of its container.

bottom

The container is stuck to the bottom edge of its container.

left

The container is stuck to the left-hand edge of its container.

block-start

The container is stuck to the block-start edge of its container.

block-end

The container is stuck to the block-end edge of its container.

inline-start

The container is stuck to the inline-start edge of its container.

inline-end

The container is stuck to the inline-end edge of its container.

To evaluate a container with a non-nonestuck scroll-state query, it must haveposition: sticky set on it, and be inside a scroll container. If the test passes, the rules inside the@container block are applied to descendants of theposition: sticky container.

It is possible for two values from opposite axes to match at the same time:

css

@container scroll-state((stuck: top) and (stuck: left)) {  /* … */}

However, two values from opposite edges will never match at the same time:

css

@container scroll-state((stuck: left) and (stuck: right)) {  /* … */}

To evaluate whether a container is stuck, without being concerned about the direction, use thenone value with thenot operator:

css

@container not scroll-state(stuck: none) {  /* … */}

Formal syntax

@container =
  @container<container-condition># {<block-contents> }

<container-condition> =
[<container-name>?<container-query>?]!

<container-name> =
<custom-ident>

<container-query> =
not<query-in-parens>|
<query-in-parens>[[and<query-in-parens>]*|[or<query-in-parens>]*]

<query-in-parens> =
  (<container-query>)|
  (<size-feature>)|
style(<style-query>)|
scroll-state(<scroll-state-query>)|
<general-enclosed>

See also
Using container queries
Using container size and style queries
Using container scroll-state queries
container-name
container-type
contain
content-visibility
CSS containment module
CSS at-rule functions