Selektorji potomcev v CSS

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

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

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

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

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>