Container Queries in CSS

First a container must be registered, and it can be queried.

Register a Container

Use a selector to register a container.

.parent { container-name: myname; container-type: inline-size; ... other code } 

or, use the shorthand option

.parent { container: myname / inline-size; ... other code } 

At the time of registration, two details - type and name - have to specified.

Container Type

container-type: ...

• size
• inline-size
• normal

Container Name

container-name: <nameofcontainer>;

<nameofcontainer> identifies the container especially useful if you may a scenario of multiple containers.

Query a Container

The container query starts with the @container at-rule followed by the name of the container and the feature query.

div { font-size: 2em; } @container myname (width: > 30ch) { div { font-size: 3em; } } 

container query to set font-size for the div inside the myname container to 3em if the feature width is greater than 30ch.

Features to Query

size-query...

• width
• height
• inline-size
• block-size
• aspect-ratio
• orientation

style-query...

• style(property: value)

property to be checked for value.

for eg

@container contname style('background-color: blue') { ... styles ... } 

The container query to apply styles if the background-color of the container contname is blue

Compound Queries

and, or and not can be used to create compound queries

for eg

 @container myname (width>30ch) and (height>100px) { ... } @container myname not (color: blue) { ... } 

Nested Container Queries

Container queries can be nested within other container queries.

for eg

 @container myname (width>30ch) { ... @container myname (background-color: blue) { ... } @container myname (background-color: red) { ... } }