Lastenselektori CSS:ssä

Oletetaan, että meillä on seuraava koodi:

html<p>
  teksti <b><i>lihavoitu kursivoitu</i></b>
</p>
<p>
  teksti <i>vain kursivoitu</i>
</p>

Oletetaan, että haluamme valita kaikki i -tagit, jotka ovat kappaleiden jälkeläisiä. Tehdään se:

cssp i {
  color: red;
}

Koodin suorituksen tulos:

Valitaan nyt ne i -tagit, jotka ovat kappaleidemme välittömiä jälkeläisiä. Tässä auttaa lastenselektori >.

Ymmärtääksemme, kuinka sitä käytetään, verrataan sitä jälkeläisvalitsimeen. Näin: p i - valitsemme kaikki kappaleiden sisällä olevat kursivoidut, ja näin: p > i - vain ne kursivoidut, jotka ovat kappaleiden välittömiä jälkeläisiä.

Sovelletaan tätä valitsinta HTML-koodiimme:

cssp > i {
  color: red;
}

Koodin suorituksen tulos:

html<ul>
  <li>
    <i>kursivoitu</i>
    <b>lihavoitu</b>
    <b><i>lihavoitu kursivoitu</i></b>
  </li>
  <li>
    <i>kursivoitu</i>
    <b>lihavoitu</b>
    <b><i>lihavoitu kursivoitu</i></b>
  </li>
</ul>