CSS @container Rule
Example
Define styles for other elements depending on the container's size or styles:
.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 »
Definition and Usage
The @container rule is used to define styles
for other elements depending on the container's size or styles.
The style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container size or style value changes.
Tip: In CSS, a container is an element that wraps around other elements to group them together for styling purposes.
Browser Support
The numbers in the table specify the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @container | 105 | 105 | 110 | 16 | 91 |
CSS Syntax
@container containername
(containerquery) {
css declarations
}
Property Values
| Value | Description |
|---|---|
| containername | Optional. The name of the container |
| containerquery | Required. The condition to evaluate against. Styles are applied if the
condition is true.
The following descriptors can be used within containerquery:
|
