Lapse valijad CSS-is

Oletame, et meil on järgmine kood:

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

Oletame, et tahame valida kõik i sildid, mis on lõikude järeltulijad. Teeme selle:

cssp i {
  color: red;
}

Koodi täitmise tulemus:

Valime nüüd need i sildid, mis on meie lõikude otsesed järeltulijad. Selles aitab meid lapse valija >.

Et mõista, kuidas seda kasutada, võrdleme seda järeltulija valijaga. Nii: p i - valime kõik kaldkirjad lõikude sees, aga nii: p > i - ainult kaldkirjad, mis on lõikude otsesed järeltulijad.

Rakendame seda valijat meie HTML koodile:

cssp > i {
  color: red;
}

Koodi täitmise tulemus:

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>