CSS-Nesting-Anweisungen

Jede Anweisung, deren Körper Stilregeln enthält, kann mithilfe von CSS-Nesting innerhalb einer anderen Stilregel verschachtelt werden. Innerhalb von Anweisungen verschachtelte Stilregeln übernehmen ihre Verschachtelungs-Selektor-Definition von der nächstgelegenen übergeordneten Stilregel. Eigenschaften können direkt in eine verschachtelte Anweisung aufgenommen werden, was so wirkt, als wären sie in einem & {...}-Block verschachtelt.

Anweisungen, die verschachtelt werden können

Beispiele

Verschachtelte @media-Anweisung

In diesem Beispiel sehen wir drei CSS-Blöcke. Der erste zeigt, wie man typische Anweisungsverschachtelung schreibt, der zweite ist eine erweiterte Schreibweise der Verschachtelung, wie der Browser sie analysiert, und der dritte zeigt das nicht verschachtelte Äquivalent.

Verschachteltes CSS

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

Erweitertes verschachteltes CSS

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

Nicht verschachteltes Äquivalent

css
.foo {
  display: grid;
}

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

Mehrere verschachtelte @media-Anweisungen

Anweisungen können innerhalb anderer Anweisungen verschachtelt werden. Unten sehen Sie ein Beispiel dafür und wie es ohne Verschachtelung geschrieben würde.

Verschachtelte Anweisungen

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

Nicht verschachteltes Äquivalent

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

Verschachtelung von Kaskadenebenen (@layer)

Kaskadenebenen können verschachtelt werden, um Unterebenen zu erstellen. Diese werden mit einem . (Punkt) verbunden.

Definition der Eltern- und Kindebenen

Wir beginnen mit der Definition der benannten Kaskadenebenen, bevor wir sie ohne Zuordnung von Stilen verwenden.

css
@layer base {
  @layer support;
}

Zuweisung von Regeln zu Ebenen mit Verschachtelung

Hier weist der .foo-Selektor seine Regeln der base @layer zu. Die verschachtelte support @layer erstellt die base.support Unterebene, und der &-Verschachtelungs-Selektor wird verwendet, um die Regeln für den .foo .bar-Selektor zu erstellen.

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

Äquivalent ohne Verschachtelung

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

Siehe auch