Avkommare selektorer i CSS

Låt oss säga att vi har en lista ul och en lista 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>

Låt oss färga li-taggarna i dessa listor i rött:

li {
	color: red;
}

Låt oss nu säga att vi vill färga li-taggarna i ul-listan i rött, och li-taggarna i ol-listan - i grönt.

I det här fallet kommer selektorn för avkommor att hjälpa oss. Den låter dig välja taggar baserat på deras förälder. För att göra detta måste du ange selektorn för föräldern, och efter ett mellanslag - selektorn för avkomman. I vårt fall kommer selektorn ul li att välja alla li-taggar från ul-listan, och selektorn ol li - kommer att välja alla li-taggar från ol-listan. Låt oss färga dem i de nödvändiga färgerna:

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

Selektorn för avkommor behöver inte nödvändigtvis bestå av två taggselektorer - det kan finnas ett valfritt antal av dem, skrivna med mellanslag. I följande kod väljs till exempel alla i-taggar som finns inuti li-taggen, vilka i sin tur finns inuti ul-taggen:

ul li i {
	color: red;
}

Följande kod ges:

<ul>
	<li>text <i>kursiv</i></li>
	<li>text <i>kursiv</i></li>
	<li>text <i>kursiv</i></li>
	<li>text <i>kursiv</i></li>
</ul>

<p>
	styckestext <i>kursiv</i>
</p>
<p>
	styckestext <i>kursiv</i>
</p>

Färga den kursiva texten från ul-taggarna i rött, och den kursiva texten från p-taggarna i grönt.

Följande kod ges:

<p>
	styckestext <b><i>fet kursiv</i></b>
</p>
<p>
	styckestext <i>kursiv</i>
</p>

Färga den kursiva texten som finns inuti b-taggen, som i sin tur finns inuti p-taggen, i rött.