Avkomsselektor i CSS

La oss si at vi har en liste ul og en liste ol:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>
<ol>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ol>

La oss fargelegge taggene li i disse listene i rødt:

li {
	color: red;
}

La oss nå si at vi vil fargelegge taggene li i ul-listen i rødt, og taggene li i ol-listen i grønt.

I dette tilfellet vil en avkomsselektor hjelpe oss. Den lar oss velge tagger basert på deres forelder. For å gjøre dette må du spesifisere selektoren for forelderen, og etter et mellomrom - selektoren for avkommet. I vårt tilfelle vil selektoren ul li velge alle li-taggene fra ul-listen, og selektoren ol li vil velge alle li-taggene fra ol-listen. La oss fargelegge dem i de ønskede fargene:

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

En avkomsselektor trenger ikke nødvendigvis å bestå av to taggselektorer - det kan være hvilket som helst antall av dem, skrevet med mellomrom. I følgende kode, for eksempel, velges alle i-taggene som befinner seg inne i en li-tagg, som igjen befinner seg inne i en ul-tagg:

ul li i {
	color: red;
}

Følgende kode er gitt:

<ul>
	<li>tekst <i>kursiv</i></li>
	<li>tekst <i>kursiv</i></li>
	<li>tekst <i>kursiv</i></li>
	<li>tekst <i>kursiv</i></li>
</ul>

<p>
	avsnittstekst <i>kursiv</i>
</p>
<p>
	avsnittstekst <i>kursiv</i>
</p>

Fargelegg kursiven fra ul-taggene i rødt, og kursiven fra p-taggene i grønt.

Følgende kode er gitt:

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

Fargelegg kursiven som befinner seg inni b-taggen, som igjen befinner seg inni p-taggen, i rødt.