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
BCD tables only load in the browser