Kinderselektor in CSS

Gestel ons het die volgende kode:

<p>
	teks <b><i>vet kursief</i></b>
</p>
<p>
	teks <i>net kursief</i>
</p>

Gestel ons wil al die i-tags kies, wat afstammelinge van paragrawe is. Laat ons dit doen:

p i {
	color: red;
}

Resultaat van die kode-uitvoering:

Laat ons nou die i-tags kies, wat direkte afstammelinge van ons paragrawe is. Die kinderselektor > sal ons hierin help.

Om te verstaan hoe om dit te gebruik, laat ons dit vergelyk met die afstammelingselektor. Soos volg: p i - ons sal alle kursiewe binne paragrawe kies, maar so: p > i - slegs die kursiewe wat direkte afstammelinge van die paragrawe is.

Laat ons hierdie selektor op ons HTML-kode toepas:

p > i {
	color: red;
}

Resultaat van die kode-uitvoering:

Die volgende kode word gegee:

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

Kleur slegs daardie b-tags in rooi, wat direkte afstammelinge van die li-tags is.