CSS selektor potomaka

Recimo da imamo neuređenu listu ul i uređenu listu 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>

Hajde da obojimo li oznake u ovim listama crvenom bojom:

li {
	color: red;
}

Recimo sada da želimo da obojimo li oznake neuređene liste ul crvenom bojom, a li oznake uređene liste ol - zelenom.

U ovom slučaju će nam pomoći selektor potomaka. On omogućava odabir elemenata na osnovu njihovog roditelja. Za to treba navesti selektor roditelja, a zatim razmak i selektor potomka. U našem slučaju, selektor ul li će odabrati sve li elemente unutar ul liste, dok će selektor ol li - odabrati sve li elemente unutar ol liste. Hajde da ih obojimo željenim bojama:

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

Selektor potomaka ne mora nužno da se sastoji od dva selektora tipa elemenata - može ih biti bilo koji broj, razdvojenih razmakom. U sledećem kodu, na primer, odabiru se svi i elementi koji se nalaze unutar li elementa, koji su zauzvrat unutar ul elementa:

ul li i {
	color: red;
}

Dat je sledeći kod:

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

Obojite u crvenu boju kurziv unutar ul elemenata, a u zelenu boju - kurziv unutar p elemenata.

Dat je sledeći kod:

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

Obojite u crvenu boju kurziv koji se nalazi unutar b elementa, koji se zauzvrat nalazi unutar p elementa.