Descendant combinator
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der Descendant-Kombinator — typischerweise durch ein einzelnes Leerzeichen (" ") dargestellt — kombiniert zwei Selektoren so, dass Elemente, die vom zweiten Selektor getroffen werden, ausgewählt werden, wenn sie ein Vorfahrelement (Elternteil, Elternteil des Elternteils, Elternteil des Elternteils des Elternteils, usw.) haben, das dem ersten Selektor entspricht. Selektoren, die einen Descendant-Kombinator verwenden, werden Descendant-Selektoren genannt.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
Der Descendant-Kombinator besteht technisch aus einem oder mehreren CSS-Leerzeichen — dem Leerzeichen oder einem von vier Steuerzeichen: Wagenrücklauf, Form Feed, Zeilenumbruch und Tabulatorzeichen — zwischen zwei Selektoren, wenn kein anderer Kombinator vorhanden ist. Zusätzlich können die Leerzeichen, aus denen der Kombinator besteht, beliebig viele CSS-Kommentare enthalten.
Syntax
selector1 selector2 {
/* property declarations */
}
Beispiele
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
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>
Ergebnis
Spezifikationen
Specification |
---|
Selectors Level 4 # descendant-combinators |
Browser-Kompatibilität
BCD tables only load in the browser