Podrejeni izbirnik v CSS

Recimo, da imamo naslednjo kodo:

html<p>
  besedilo <b><i>krepko ležeče</i></b>
</p>
<p>
  besedilo <i>samo ležeče</i>
</p>

Recimo, da želimo izbrati vse oznake i, ki so potomci odstavkov. Naredimo to:

cssp i {
  color: red;
}

Rezultat izvajanja kode:

Zdaj pa izberimo tiste oznake i, ki so neposredni potomci naših odstavkov. Pri tem nam bo pomagal podrejeni izbirnik >.

Da bi razumeli, kako ga uporabljati, primerjajmo ga z izbirnikom potomcev. Takole: p i - izbrali bomo vse ležeče znotraj odstavkov, takole pa: p > i - samo ležeče, ki so neposredni potomci odstavkov.

Uporabimo ta izbirnik na naši HTML kodi:

cssp > i {
  color: red;
}

Rezultat izvajanja kode:

html<ul>
  <li>
    <i>ležeče</i>
    <b>krepko</b>
    <b><i>krepko ležeče</i></b>
  </li>
  <li>
    <i>ležeče</i>
    <b>krepko</b>
    <b><i>krepko ležeče</i></b>
  </li>
</ul>