Afkom-vælger i CSS

Lad os sige, at vi har en liste ul og en liste ol:

<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>

Lad os farve li-tagsene i disse lister rød:

li {
	color: red;
}

Lad os nu sige, at vi vil farve li-tagsene i ul-listen rød, og li-tagsene i ol-listen - grøn.

I dette tilfælde kan en afkom-vælger hjælpe os. Den tillader at vælge tags baseret på deres forælder. For at gøre dette skal du angive forælderens vælger, og efter et mellemrum - afkommets vælger. I vores tilfælde vil vælgeren ul li vælge alle li-tags fra ul-listen, og vælgeren ol li - vil vælge alle li-tags fra ol-listen. Lad os farve dem i de ønskede farver:

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

En afkom-vælger behøver ikke nødvendigvis at bestå af to tag-vælgere - der kan være et hvilket som helst antal af dem, adskilt af mellemrum. I følgende kode vælges for eksempel alle i-tags, der befinder sig inde i et li-tag, som igen befinder sig inde i et ul-tag:

ul li i {
	color: red;
}

Følgende kode er givet:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

Farv kursivet fra ul-tagsene rød, og kursivet fra p-tagsene grøn.

Følgende kode er givet:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

FarV kursivet, der befinder sig inde i et b-tag, som igen befinder sig inde i et p-tag, rødt.