& Verschachtelungsselektor
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Der CSS-Verschachtelungsselektor & gibt bei der Verwendung von CSS-Verschachtelung ausdrücklich die Beziehung zwischen übergeordneten und untergeordneten Regeln an. Er macht die Selektoren der verschachtelten untergeordneten Regel relativ zum übergeordneten Element. Ohne den Verschachtelungsselektor & wählt der Selektor der untergeordneten Regel untergeordnete Elemente aus. Die Selektoren der untergeordneten Regel haben dieselbe Spezifität, als stünden sie innerhalb von :is().
Hinweis:
Untergeordnete Regel bedeutet nicht Selektor für untergeordnete Elemente. Je nach Verwendung des Verschachtelungsselektors & kann eine untergeordnete Regel das übergeordnete Element oder untergeordnete Elemente auswählen.
Wird der Verschachtelungsselektor & nicht in einer verschachtelten Stilregel verwendet, steht er für die Gültigkeitsbereichswurzel.
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 Leerzeichen
Betrachten Sie den folgenden Code, in dem ohne den Verschachtelungsselektor & verschachtelt wird.
.parent-rule {
/* parent rule properties */
.child-rule {
/* child rule properties */
}
}
Beim Verarbeiten der verschachtelten Selektoren fügt der Browser automatisch ein Leerzeichen zwischen ihnen ein, 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 Leerzeichen direkt an die übergeordnete Regel angefügt werden muss, etwa bei der Verwendung einer Pseudoklasse oder beim Erstellen zusammengesetzter Selektoren, muss der Verschachtelungsselektor & unmittelbar vorangestellt werden.
Betrachten Sie ein Beispiel, in dem ein Element sowohl dauerhaft geltende Stile als auch verschachtelte Stile erhalten soll, die nur beim Darüberfahren mit dem Mauszeiger gelten. Ohne den Verschachtelungsselektor & wird ein Leerzeichen eingefügt. Dadurch entsteht eine Regel, die die verschachtelten Stile auf jedes untergeordnete Element anwendet, über dem sich der Mauszeiger befindet. Das ist jedoch nicht beabsichtigt.
.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 */
}
Wird der Verschachtelungsselektor & ohne Leerzeichen hinzugefügt, erhalten die von der übergeordneten Regel ausgewählten Elemente die Stile, wenn sich der Mauszeiger über ihnen befindet.
.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 */
}
Den Verschachtelungsselektor & anhängen
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 verwendet 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 repräsentieren
Der Selektor & entspricht dem Selektor :is() und unterliegt derselben Einschränkung: Er kann keine Pseudoelemente repräsentieren.
Bei der folgenden Stilregel wird beispielsweise kein generierter Inhalt rot dargestellt, selbst wenn er in <div class="important"> verschachtelt ist, da .important :is(.foo::before) auf nichts zutreffen 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. Bei der folgenden Regel wird beispielsweise selbst auf einem kleinen Bildschirm kein generierter Inhalt rot dargestellt, da die Eigenschaft color: red implizit in einen &-Selektor eingeschlossen wird. Dieser entspricht hier :is(.foo::before).
.foo::before {
content: "Hello";
@media (width < 600px) {
color: red;
}
}
Beispiele
Die beiden folgenden Beispiele erzeugen dieselbe Ausgabe. Das erste verwendet normale CSS-Stile, das zweite den Verschachtelungsselektor &.
Normale CSS-Stile verwenden
Dieses Beispiel verwendet normale CSS-Stile.
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
& in verschachtelten CSS-Stilen verwenden
Dieses Beispiel verwendet verschachtelte CSS-Stile.
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
& außerhalb einer verschachtelten Regel verwenden
Wird & nicht in einer verschachtelten Stilregel verwendet, steht es für die Gültigkeitsbereichswurzel. 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
| Spezifikation |
|---|
| CSS Nesting Module Level 1 # nest-selector |