Der Kindselektor in CSS

Der Kindselektor > erlaubt es, Elemente basierend auf der direkten Verschachtelung ineinander auszuwählen.

Syntax

Selektor1 > Selektor2 {
	
}

Beispiel

Wenden wir uns allen b-Tags zu, die sich direkt innerhalb von p-Tags befinden, und färben sie rot ein:

<p>
	Text <b>+</b>
</p>
<p>
	Text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Beispiel

Wenden wir uns allen b-Tags zu, die sich direkt innerhalb von Elementen mit der Klasse .block befinden, und färben sie in rot ein:

<p class="block">
	Text <b>+</b>
</p>
<p class="block">
	Text <i><b>-</b></i>
</p>
<p>
	Text <b>-</b>
</p>

.block > b {
	color: red;
}

Beispiel

Wenden wir uns allen Elementen mit der Klasse .elem zu, die sich direkt innerhalb von Elementen mit der Klasse .block befinden, und färben sie rot ein:

<p class="block">
	Text <span class="elem">+</span>
</p>
<p class="block">
	Text <i><span class="elem">-</span></i>
</p>
<p class="block">
	Text <span>-</span>
</p>
<p>
	Text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Siehe auch

Der Nachfahrenselektor,
der es erlaubt, ein Element anhand seines Elternelements auszuwählen
Der Adjacent-Sibling-Selektor,
der es erlaubt, ein Element anhand seines benachbarten Geschwisterelements auszuwählen
Der General-Sibling-Selektor,
der es erlaubt, Elemente nach einem bestimmten Element auszuwählen
Der Universalselektor,
der es erlaubt, alle Elemente auszuwählen