Kind-Kombinator
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der Kind-Kombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er erfasst nur jene Elemente, die vom zweiten Selektor erfasst werden und die direkten Kinder der Elemente sind, die vom ersten Selektor erfasst werden.
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
Elemente, die vom zweiten Selektor erfasst werden, müssen die unmittelbaren Kinder der Elemente sein, die vom ersten Selektor erfasst werden. Dies ist strenger als der Nachfahren-Kombinator, der alle Elemente erfasst, die vom zweiten Selektor erfasst werden, für die es ein Vorfahren-Element gibt, das vom ersten Selektor erfasst wird, unabhängig von der Anzahl der "Sprünge" im DOM.
Syntax
/* The white space around the > combinator is optional but recommended. */
selector1 > selector2 { /* style properties */ }
Beispiele
CSS
span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
HTML
<div>
<span>
Span #1, in the div.
<span>Span #2, in the span that's in the div.</span>
</span>
</div>
<span>Span #3, not in the div at all.</span>
Ergebnis
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # child-combinators |