Descendant Selector in CSS

Stel we hebben een ul lijst en een ol lijst:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Laten we de li tags in deze lijsten rood kleuren:

li {
	color: red;
}

Stel dat we nu de li tags van de ul lijst rood willen kleuren, en de li tags van de ol lijst - in groen.

In dit geval helpt de descendant selector ons. Hiermee kunnen we tags selecteren op basis van hun ouder. Om dit te doen moet u de selector van de ouder opgeven, gevolgd door een spatie - de selector van de descendant. In ons geval zal de selector ul li alle li tags uit de ul lijst selecteren, en de selector ol li - zal alle li tags uit de ol lijst selecteren. Laten we ze in de gewenste kleuren kleuren:

ul li {
	color: red;
}
ol li {
	color: green;
}

Een descendant selector hoeft niet per se te bestaan uit twee tag selectors - er kunnen er een willekeurig aantal zijn, gescheiden door een spatie. In de volgende code worden bijvoorbeeld alle i tags geselecteerd die zich binnen een li tag bevinden, die op hun beurt weer binnen een ul tag bevinden:

ul li i {
	color: red;
}

Gegeven de volgende code:

<ul>
	<li>text <i>cursief</i></li>
	<li>text <i>cursief</i></li>
	<li>text <i>cursief</i></li>
	<li>text <i>cursief</i></li>
</ul>

<p>
	paragraaf text <i>cursief</i>
</p>
<p>
	paragraaf text <i>cursief</i>
</p>

Kleur de cursieve tekst in de ul tags rood, en de cursieve tekst in de p tags groen.

Gegeven de volgende code:

<p>
	paragraaf text <b><i>vet cursief</i></b>
</p>
<p>
	paragraaf text <i>cursief</i>
</p>

Kleur de cursieve tekst, die zich in de b tag bevindt, die op zijn beurt zich in de p tag bevindt, rood.