&-Verschachtelungsselektor

Syntax

/* Nested directly — adds whitespace (descendant) */
parentRule {
  & childRule { }
}

/* Attached to parent — no whitespace (e.g., pseudo-class, compound selector) */
parentRule {
  &:pseudo-class { }
}

/* Reversed context — & placed after another selector */
parentRule {
  otherRule & { }
}

Beschreibung

&-Verschachtelungsselektor und Leerraum

Betrachten Sie den folgenden Code, bei dem die Verschachtelung ohne den &-Verschachtelungsselektor erfolgt.

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

Wenn der Browser die verschachtelten Selektoren parst, fügt er automatisch Leerraum zwischen den Selektoren hinzu, um eine neue CSS-Selektorregel zu erstellen. Der folgende Code zeigt die entsprechenden nicht verschachtelten Regeln:

.parent-rule {
  /* parent rule style properties */
}

.parent-rule .child-rule {
  /* style properties for .child-rule descendants for .parent-rule ancestors */
}

Wenn die verschachtelte Regel ohne Leerraum an die übergeordnete Regel angefügt werden muss, etwa bei der Verwendung einer Pseudoklasse oder beim Erstellen von zusammengesetzten Selektoren, muss der &-Verschachtelungsselektor unmittelbar vorangestellt werden, um den gewünschten Effekt zu erzielen.

Betrachten Sie ein Beispiel, bei dem wir ein Element formatieren möchten, indem Stile bereitgestellt werden, die jederzeit angewendet werden, und zusätzlich einige Stile verschachtelt werden, die nur beim Überfahren mit der Maus angewendet werden. Wenn der &-Verschachtelungsselektor nicht enthalten ist, wird Leerraum hinzugefügt, und wir erhalten ein Regelwerk, das die verschachtelten Stile auf jeden überfahrenen Nachfahren des Selektors der übergeordneten Regel anwendet. Dies ist jedoch nicht das gewünschte Ergebnis.

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule *:hover {
  /* child rule properties */
}

Wenn der &-Verschachtelungsselektor ohne Leerraum hinzugefügt wird, werden die von der übergeordneten Regel gefundenen Elemente beim Überfahren mit der Maus formatiert.

.parent-rule {
  /* parent rule properties */
  &:hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule:hover {
  /* child rule properties */
}

Anhängen des &-Verschachtelungsselektors

Der &-Verschachtelungsselektor kann auch angehängt werden, um den Kontext der Regeln umzukehren.

.card {
  /* .card styles */
  .featured & {
    /* .featured .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

Der &-Verschachtelungsselektor kann mehrfach platziert werden:

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

Kann keine Pseudoelemente darstellen

Der &-Selektor entspricht dem :is()-Selektor und unterliegt derselben Einschränkung, dass er keine Pseudoelemente darstellen kann.

Beispielsweise wird mit der folgenden Stilregel kein generierter Inhalt rot formatiert, selbst wenn er in <div class="important"> verschachtelt ist, da .important :is(.foo::before) nichts finden kann.

.foo::before {
  content: "Hello";

  .important & {
    color: red;
  }
}

Diese Einschränkung gilt auch für verschachtelte At-Regeln, deren Eigenschaften implizit in einen &-Selektor eingeschlossen werden. Mit der folgenden Regel wird beispielsweise kein generierter Inhalt rot formatiert, selbst auf einem kleinen Bildschirm, da die Eigenschaft color: red implizit in einen &-Selektor eingeschlossen wird, der in diesem Fall :is(.foo::before) ist.

.foo::before {
  content: "Hello";

  @media (width < 600px) {
    color: red;
  }
}

Beispiele

Die folgenden beiden Beispiele erzeugen dieselbe Ausgabe. Das erste verwendet normale CSS-Stile und das zweite den &-Verschachtelungsselektor.

Verwendung normaler CSS-Stile

Dieses Beispiel verwendet normales CSS-Styling.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

Ergebnis

Verwendung von & in verschachtelten CSS-Stilen

Dieses Beispiel verwendet verschachteltes CSS-Styling.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

Ergebnis

Verwendung von & außerhalb einer verschachtelten Regel

Wenn & nicht in einer verschachtelten Stilregel verwendet wird, stellt es die Scope-Wurzel dar. In diesem Fall gelten alle Stile für das Dokument.

<p>Hover over the output box to change document's background color.</p>

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Verschachtelung
• CSS-Verschachtelung-Modul
• CSS-Selektoren-Modul