Kindselektoren

Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.
 
/* Listenpunkte, die Kinder der "my-things" Liste sind */
ul.my-things > li {
  margin: 2em;
}

Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.

Syntax

selector1 > selector2 { Stileigenschaften }

Beispiel

CSS

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

HTML

<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>

Ergebnis

Spezifikationen

Spezifikation Status Kommentar
Selectors Level 4
Die Definition von 'child combinator' in dieser Spezifikation.
Arbeitsentwurf  
Selectors Level 3
Die Definition von 'child combinators' in dieser Spezifikation.
Empfehlung Keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'child selectors' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Child combinator (A > B)Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 7Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung