Kindselektoren

Der > Kombinator teilt zwei Selektoren und matcht nur jene Elemente, die vom zweiten Selektor gematcht wurden, die direkte Kinder von Elementen sind, die vom ersten gemacht wurden. Falls im Gegensatz dazu zwei Selektoren mittels des Nachfahrenselektors kombiniert werden, matcht der kombinierte Selektorausdruck jene Elemente, die vom zweiten Selektor gemacht werden, für welche ein Vorfahrelement existiert, das vom ersten Selektor gematcht wird, unabhängig von der Anzahl der "Sprünge" aufwärts im DOM.

Syntax

selector1 > selector2 { Stileigenschaften }

Beispiel

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

<div>
  <span>Span 1. Innerhalb des Divs.
    <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span>
  </span>
</div>
<span>Span 3. In keinem Div.</span>

Spezifikationen

Browser Kompatibilität