Anyat-rule whose body contains style rules can be nested inside another style rule using CSS nesting. Style rules nested inside at-rules take their nesting selector definition from the nearest ancestor style rule. Properties can be directly included inside a nested at-rule, acting as if they were nested in a& {...} block.

at-rules that can be nested

• @media
• @supports
• @layer
• @scope
• @container
• @starting-style

Examples

Nesting@media at-rule

In this example we see three blocks of CSS. The first one shows how to write typical at-rule nesting, the second is an expanded way of writing the nesting as the browser parses it, and the third one shows the non-nested equivalent.

Nested CSS

.foo {  display: grid;  @media (orientation: landscape) {    grid-auto-flow: column;  }}

Expanded nested CSS

.foo {  display: grid;  @media (orientation: landscape) {    & {      grid-auto-flow: column;    }  }}

Non-nested equivalent

.foo {  display: grid;}@media (orientation: landscape) {  .foo {    grid-auto-flow: column;  }}

Multiple nested@media at-rules

At-rules can be nested within other at-rules. Below you can see an example of this, and how it would be written without nesting.

Nested at-rules

.foo {  display: grid;  @media (orientation: landscape) {    grid-auto-flow: column;    @media (width >= 1024px) {      max-inline-size: 1024px;    }  }}

Non-nested equivalent

.foo {  display: grid;}@media (orientation: landscape) {  .foo {    grid-auto-flow: column;  }}@media (orientation: landscape) and (width >= 1024px) {  .foo {    max-inline-size: 1024px;  }}

Nesting Cascade Layers (@layer)

Cascade Layers can be nested tocreate child-layers. These are joined with a. (dot).

Defining the parent & child layers

We start by defining the named cascade layers, prior to using them, without any style assignments.

@layer base {  @layer support;}

Assigning rules to layers with nesting

Here the.foo selector assigns its rules to thebase@layer. The nestedsupport@layer creates thebase.support sub-layer, and the& nesting selector is used to create the rules for the.foo .bar selector.

.foo {  @layer base {    block-size: 100%;    @layer support {      & .bar {        min-block-size: 100%;      }    }  }}

Equivalent without nesting

@layer base {  .foo {    block-size: 100%;  }}@layer base.support {  .foo .bar {    min-block-size: 100%;  }}

See also

• CSS Nesting module
• & nesting selector
• Using CSS nesting
• Nesting and specificity
• Nesting container queries