Child-selektorer i CSS

Lad os have følgende kode:

<p>
	tekst <b><i>fed kursiv</i></b>
</p>
<p>
	tekst <i>bare kursiv</i>
</p>

Lad os sige, at vi vil vælge alle i-tags, der er efterkommere af afsnit. Lad os gøre det:

p i {
	color: red;
}

Resultatet af koden:

Lad os nu vælge de i-tags, der er direkte efterkommere af vores afsnit. Child-selectoren > vil hjælpe os med dette.

For at forstå, hvordan man bruger den, lad os sammenligne den med afstamningsselektoren. Sådan her: p i - vi vil vælge al kursiv tekst inde i afsnit, og sådan her: p > i - kun kursiv tekst, der er direkte efterkommere af afsnit.

Lad os anvende denne selector på vores HTML-kode:

p > i {
	color: red;
}

Resultatet af koden:

Følgende kode er givet:

<ul>
	<li>
		<i>kursiv</i>
		<b>fed</b>
		<b><i>fed kursiv</i></b>
	</li>
	<li>
		<i>kursiv</i>
		<b>fed</b>
		<b><i>fed kursiv</i></b>
	</li>
</ul>

Farv kun de b-tags røde, der er direkte efterkommere af li-tags.