De kindselector in CSS

Stel dat we de volgende code hebben:

<p>
	tekst <b><i>vet cursief</i></b>
</p>
<p>
	tekst <i>alleen cursief</i>
</p>

Stel dat we alle i tags willen selecteren, die afstammelingen zijn van alinea's. Laten we dit doen:

p i {
	color: red;
}

Resultaat van de code:

Laten we nu de i tags selecteren, die directe kinderen zijn van onze alinea's. De kindselector > zal ons hierbij helpen.

Om te begrijpen hoe je hem gebruikt, laten we hem vergelijken met de selector voor afstammelingen. Zo: p i - we selecteren alle cursieven binnen alinea's, en zo: p > i - alleen cursieven die directe kinderen zijn van de alinea's.

Laten we deze selector toepassen op onze HTML code:

p > i {
	color: red;
}

Resultaat van de code:

Gegeven de volgende code:

<ul>
	<li>
		<i>cursief</i>
		<b>vet</b>
		<b><i>vet cursief</i></b>
	</li>
	<li>
		<i>cursief</i>
		<b>vet</b>
		<b><i>vet cursief</i></b>
	</li>
</ul>

Kleurt u alleen de b tags rood, die directe kinderen zijn van de li tags.