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.

css
/* 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

css
selector1 selector2 {
  /* property declarations */
}

Beispiele

CSS

css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Descendant combinator (A B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch