DEV Community

Cover image for Container Queries in CSS
Gajendra Dhir
Gajendra Dhir

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

or, use the shorthand option

.parent {
    container: myname / inline-size;
    ... other code
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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 
    ...
}
Enter fullscreen mode Exit fullscreen mode

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) {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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) {
            ...
        }
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)