Kinderselektor in CSS

Gestel ons het die volgende kode:

html<p>
  teks <b><i>vet kursief</i></b>
</p>
<p>
  teks <i>net kursief</i>
</p>

Gestel ons wil al die i-tags kies, wat afstammelinge van paragrawe is. Laat ons dit doen:

cssp i {
  color: red;
}

Resultaat van die kode-uitvoering:

Laat ons nou die i-tags kies, wat direkte afstammelinge van ons paragrawe is. Die kinderselektor > sal ons hierin help.

Om te verstaan hoe om dit te gebruik, laat ons dit vergelyk met die afstammelingselektor. Soos volg: p i - ons sal alle kursiewe binne paragrawe kies, maar so: p > i - slegs die kursiewe wat direkte afstammelinge van die paragrawe is.

Laat ons hierdie selektor op ons HTML-kode toepas:

cssp > i {
  color: red;
}

Resultaat van die kode-uitvoering:

html<ul>
  <li>
    <i>kursief</i>
    <b>vet</b>
    <b><i>vet kursief</i></b>
  </li>
  <li>
    <i>kursief</i>
    <b>vet</b>
    <b><i>vet kursief</i></b>
  </li>
</ul>