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.