CSS selektor potomaka

Recimo da imamo neuređenu listu ul i uređenu listu ol:

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

cssli {
  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:

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

cssul li i {
  color: red;
}

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

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