Selektorji potomcev v CSS

Recimo, da imamo seznam ul in seznam 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>

Pobarvajmo oznake li v teh seznamih v rdečo barvo:

li {
	color: red;
}

Recimo, da zdaj želimo pobarvati oznake li seznama ul v rdečo barvo, oznake li seznama ol pa v zeleno.

V tem primeru nam bo pomagal selektor potomcev. Omogoča izbiro oznak glede na njihovega starša. Za to morate navesti selektor starša, in preko presledka - selektor potomca. V našem primeru bo selektor ul li izbral vse oznake li iz seznama ul, selektor ol li pa bo izbral vse oznake li iz seznama ol. Pobarvajmo jih v ustrezne barve:

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

Selektor potomcev ni nujno sestavljen iz dveh selektorjev oznak - lahko jih je poljubno število, zapisanih preko presledka. V naslednji kodi, na primer, so izbrane vse oznake i, ki se nahajajo znotraj oznake li, ki se nahajajo znotraj oznake ul:

ul li i {
	color: red;
}

Podana je naslednja koda:

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

Pobarvajte v rdečo barvo ležeče pisave iz oznak ul, v zeleno barvo pa ležeče pisave iz oznak p.

Podana je naslednja koda:

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

Pobarvajte v rdečo barvo ležečo pisavo, ki se nahaja znotraj oznake b, ki se nahaja znotraj oznake p.