CSS Nesting At-Regeln
Jede At-Regel, deren Körper Stilregeln enthält, kann mithilfe von CSS-Nesting innerhalb einer anderen Stilregel verschachtelt werden. Stilregeln, die innerhalb von At-Regeln verschachtelt sind, übernehmen ihre Nesting-Selektor-Definition von der nächstgelegenen übergeordneten Stilregel. Eigenschaften können direkt innerhalb einer verschachtelten At-Regel enthalten sein, wodurch sie so wirken, als wären sie in einem & {...}
-Block verschachtelt.
At-Regeln, die verschachtelt werden können
Beispiele
Verschachtelte @media
-At-Regel
In diesem Beispiel sehen wir drei Blöcke mit CSS. Der erste zeigt, wie man eine typische At-Regel-Verschachtelung schreibt, der zweite zeigt die erweiterte Schreibweise der Verschachtelung, so wie sie der Browser interpretiert, und der dritte zeigt das äquivalente nicht verschachtelte Beispiel.
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 verschachteltes Äquivalent
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
Mehrere verschachtelte @media
-At-Regeln
At-Regeln können innerhalb anderer At-Regeln verschachtelt werden. Unten sehen Sie ein Beispiel dafür und wie es ohne Verschachtelung geschrieben würde.
Verschachtelte At-Regeln
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
@media (min-width: 1024px) {
max-inline-size: 1024px;
}
}
}
Nicht verschachteltes Äquivalent
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (min-width: 1024px) {
.foo {
max-inline-size: 1024px;
}
}
Verschachteln von Kaskadenschichten (@layer
)
Kaskadenschichten können verschachtelt werden, um Unterebenen zu erstellen. Diese werden mit einem .
(Punkt) verbunden.
Definieren der übergeordneten und untergeordneten Schichten
Wir beginnen mit der Definition der benannten Kaskadenschichten, bevor wir sie verwenden, ohne Stilzuweisungen.
@layer base {
@layer support;
}
Zuweisen von Regeln zu Schichten mit Verschachtelung
Hier weist der .foo
-Selektor seine Regeln der Basis-@layer
zu. Die verschachtelte support-@layer
erstellt die base.support
-Unterschicht, und der &
-Verschachtelungsselektor wird verwendet, um die Regeln für den .foo .bar
-Selektor zu erstellen.
.foo {
@layer base {
block-size: 100%;
@layer support {
& .bar {
min-block-size: 100%;
}
}
}
}
Äquivalent ohne Verschachtelung
@layer base {
.foo {
block-size: 100%;
}
}
@layer base.support {
.foo .bar {
min-block-size: 100%;
}
}