container-name

The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query.

With no name specified, a container query will apply styles to elements based on attributes such as the size or scroll-state of the nearest ancestor with a containment context.

Note: Size containers’ descendants can be sized using container query length units.

When a containment context is given a name, it can be specifically targeted by setting that name on a @container at-rule.

It is possible to create a query container by assigning a container-name to an element, and then query only the existence of that name in the associated @container at-rule, with no query expression specified. These so-called name-only container queries enable selectively applying styles to elements based only on whether they have an ancestor with a specific container-name set.

Syntax example: container-name: none;