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

BCD tables only load in the browser

Siehe auch

Child-Kombinator