container-name
Baseline 2023
Newly available
Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query.
A container query will apply styles to elements based on the size of the nearest ancestor with a containment context.
When a containment context is given a name, it can be specifically targeted using the @container
at-rule instead of the nearest ancestor with containment.
Note: When using the container-type
and container-name
properties, the style
and layout
values of the contain
property are automatically applied.
Syntax
container-name: none;
/* A single name */
container-name: myLayout;
/* Multiple names */
container-name: myPageLayout myComponentLibrary;
/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;
Values
none
-
Default value. The query container has no name.
<custom-ident>
-
A case-sensitive string that is used to identify the container. The following conditions apply:
- The name must not equal
or
,and
,not
, ordefault
. - The name value must not be in quotes.
- The dashed ident intended to denote author-defined identifiers (e.g.,
--container-name
) is permitted. - A list of multiple names separated by a space is allowed.
- The name must not equal
Formal definition
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | none or an ordered list of identifiers |
Animation type | Not animatable |
Formal syntax
container-name =
none |
<custom-ident>+
Examples
Using a container name
Given the following HTML example which is a card component with a title and some text:
<div class="card">
<div class="post-meta">
<h2>Card title</h2>
<p>My post details.</p>
</div>
<div class="post-excerpt">
<p>
A preview of my <a href="https://example.com">blog post</a> about cats.
</p>
</div>
</div>
To create a containment context, add the container-type
property to an element in CSS.
The following example creates two containment contexts, one for the card meta information and one for the post excerpt:
Note: A shorthand syntax for these declarations are described in the container
page.
.post-meta {
container-type: inline-size;
}
.post-excerpt {
container-type: inline-size;
container-name: excerpt;
}
Writing a container query via the @container
at-rule will apply styles to the elements of the container when the query evaluates to true.
The following example has two container queries, one that will apply only to the contents of the .post-excerpt
element and one that will apply to both the .post-meta
and .post-excerpt
contents:
@container excerpt (min-width: 400px) {
p {
visibility: hidden;
}
}
@container (min-width: 400px) {
p {
font-size: 2rem;
}
}
For more information on writing container queries, see the CSS Container Queries page.
Using multiple container names
You can also provide multiple names to a container context separated by a space:
.post-meta {
container-type: inline-size;
container-name: meta card;
}
This will allow you to target the container using either name in the @container
at-rule.
This is useful if you want to target the same container with multiple container queries where either condition could be true:
@container meta (max-width: 500px) {
p {
visibility: hidden;
}
}
@container card (max-height: 200px) {
h2 {
font-size: 1.5em;
}
}
Specifications
Specification |
---|
CSS Conditional Rules Module Level 5 # container-name |
Browser compatibility
BCD tables only load in the browser
See also
- CSS container queries
- Using container size and style queries
@container
at-rule- CSS
container
shorthand property - CSS
container-type
property - CSS
content-visibility
property