Deteći selektor u CSS-u

Neka imamo sledeći kod:

html<p>
  tekst <b><i>bold italic</i></b>
</p>
<p>
  tekst <i>just italic</i>
</p>

Neka želimo da izaberemo sve tagove i koji su potomci paragrafa. Učinimo to:

cssp i {
  color: red;
}

Rezultat izvršavanja koda:

Hajde sada da izaberemo one tagove i koji su neposredni potomci naših paragrafa. U tome će nam pomoći deteći selektor >.

Da bismo razumeli kako da ga koristimo, hajde da ga uporedimo sa selektorom potomaka. Ovako: p i - izabraćemo sva kurzivna slova unutar paragrafa, a ovako: p > i - samo kurzivna slova koja su neposredni potomci paragrafa.

Primenimo ovaj selektor na naš HTML kod:

cssp > i {
  color: red;
}

Rezultat izvršavanja koda:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>