Barnevelger i CSS

La oss ha følgende kode:

html<p>
  tekst <b><i>fet kursiv</i></b>
</p>
<p>
  tekst <i>bare kursiv</i>
</p>

La oss si at vi vil velge alle i-taggene som er etterkommere av avsnitt. La oss gjøre det:

cssp i {
  color: red;
}

Resultat av kjøring av koden:

La oss nå velge de i-taggene som er direkte barn av våre avsnitt. Barnevelgeren > vil hjelpe oss med dette.

For å forstå hvordan du bruker den, la oss sammenligne den med etterkommervelgeren. Slik: p i - vi vil velge all kursiv inni avsnitt, og slik: p > i - bare kursiv som er direkte barn av avsnitt.

La oss bruke denne velgeren på HTML-koden vår:

cssp > i {
  color: red;
}

Resultat av kjøring av koden:

html<ul>
  <li>
    <i>kursiv</i>
    <b>fet</b>
    <b><i>fet kursiv</i></b>
  </li>
  <li>
    <i>kursiv</i>
    <b>fet</b>
    <b><i>fet kursiv</i></b>
  </li>
</ul>