Nachfahren-Kombinator
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Der Nachfahren-Kombinator – üblicherweise durch ein einzelnes Leerzeichen (" ") dargestellt – verbindet zwei Selektoren. Elemente, auf die der zweite Selektor zutrifft, werden ausgewählt, wenn sie ein Vorfahrenelement (Elternelement, Elternelement des Elternelements usw.) haben, auf das der erste Selektor zutrifft. Selektoren, die einen Nachfahren-Kombinator verwenden, heißen Nachfahren-Selektoren.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
Technisch gesehen besteht der Nachfahren-Kombinator aus einem oder mehreren CSS-Whitespace-Zeichen zwischen zwei Selektoren, sofern kein anderer Kombinator vorhanden ist. Dazu zählen das Leerzeichen und vier Steuerzeichen: Wagenrücklauf, Seitenvorschub, Zeilenumbruch und Tabulator. Zwischen den Whitespace-Zeichen des Kombinators können sich außerdem beliebig viele CSS-Kommentare befinden.
Syntax
selector1 selector2 {
/* property declarations */
}
Beispiele
HTML
<ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # descendant-combinators |