CSS nesting at-rules
Any at-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
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 (min-width: 1024px) {
max-inline-size: 1024px;
}
}
}
Non-nested equivalent
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (min-width: 1024px) {
.foo {
max-inline-size: 1024px;
}
}
Nesting Cascade Layers (@layer
)
Cascade Layers can be nested to create 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 the base @layer
. The nested support @layer
creates the base.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%;
}
}