CSS-Nesting von At-Rules
Jede At-Rule, deren Inhalt Style-Regeln enthält, kann mithilfe von CSS-Nesting in einer anderen Style-Regel verschachtelt werden. Style-Regeln, die innerhalb von At-Rules verschachtelt sind, übernehmen ihre Definition für den Verschachtelungs-Selektor von der nächstgelegenen übergeordneten Style-Regel. Eigenschaften können direkt in einer verschachtelten At-Rule enthalten sein, als ob sie in einem & {...}
-Block verschachtelt wären.
Verschachtelbare At-Rules
Beispiele
Verschachtelung der @media
-At-Rule
In diesem Beispiel sehen wir drei CSS-Blöcke. Der erste zeigt, wie typische At-Rule-Verschachtelung geschrieben wird, der zweite zeigt eine erweiterte Schreibweise der Verschachtelung, wie sie der Browser interpretiert, und der dritte zeigt die nicht-verschachtelte Entsprechung.
Verschachteltes CSS
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
Erweitertes verschachteltes CSS
.foo {
display: grid;
@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
}
}
Nicht-verschachtelte Entsprechung
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
Mehrfach verschachtelte @media
-At-Rules
At-Rules können in anderen At-Rules verschachtelt werden. Unten sehen Sie ein Beispiel dafür und wie es ohne Verschachtelung geschrieben würde.
Verschachtelte At-Rules
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
@media (min-width: 1024px) {
max-inline-size: 1024px;
}
}
}
Nicht-verschachtelte Entsprechung
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (min-width: 1024px) {
.foo {
max-inline-size: 1024px;
}
}
Verschachtelung von Cascade Layers (@layer
)
Cascade Layers können verschachtelt werden, um Child-Layers zu erstellen. Diese werden mit einem .
(Punkt) verbunden.
Definition der Parent- und Child-Layers
Wir beginnen mit der Definition der benannten Cascade Layers, bevor wir sie ohne Zuweisung von Stilen verwenden.
@layer base {
@layer support;
}
Zuweisung von Regeln zu Layers mit Verschachtelung
Hier weist der .foo
-Selector seine Regeln dem base @layer
zu. Die verschachtelte support-@layer
erstellt den base.support
-Sublayer, und der &
-Verschachtelungs-Selektor wird verwendet, um die Regeln für den .foo .bar
-Selector zu erstellen.
.foo {
@layer base {
block-size: 100%;
@layer support {
& .bar {
min-block-size: 100%;
}
}
}
}
Entsprechung ohne Verschachtelung
@layer base {
.foo {
block-size: 100%;
}
}
@layer base.support {
.foo .bar {
min-block-size: 100%;
}
}