Selektorët e Femijëve në CSS

Le të kemi kodin e mëposhtëm:

html<p>
  tekst <b><i>bold italic</i></b>
</p>
<p>
  tekst <i>vetëm italic</i>
</p>

Le të themi se duam të zgjedhim të gjitha etiketat i, që janë pasardhës të paragrafëve. Le ta bëjmë këtë:

cssp i {
  color: red;
}

Rezultati i ekzekutimit të kodit:

Tani le të zgjedhim ato etiketa i, që janë pasardhës të drejtpërdrejtë të paragrafëve tanë. Në këtë do të na ndihmojë selektori i femijëve >.

Për të kuptuar se si ta përdorim atë, le ta krahasojmë atë me selektorin e pasardhësve. Kështu: p i - ne do të zgjedhim të gjitha etiketat italic brenda paragrafëve, ndërsa kështu: p > i - vetëm etiketat italic që janë pasardhës të drejtpërdrejtë të paragrafëve.

Le ta aplikojmë këtë selektor në kodin tonë HTML:

cssp > i {
  color: red;
}

Rezultati i ekzekutimit të kodit:

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>