Υπο-επιλογέας στη CSS

Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:

html<p>
  κείμενο <b><i>έντονη πλάγια</i></b>
</p>
<p>
  κείμενο <i>απλά πλάγια</i>
</p>

Ας υποθέσουμε ότι θέλουμε να επιλέξουμε όλες τις ετικέτες i, που είναι απογόνων των παραγράφων. Ας το κάνουμε αυτό:

cssp i {
  color: red;
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Ας επιλέξουμε τώρα τις ετικέτες i, που είναι άμεσοι απόγονοι των παραγράφων μας. Σε αυτό θα μας βοηθήσει ο υπο-επιλογέας >.

Για να κατανοήσουμε πώς να τον χρησιμοποιήσουμε, ας τον συγκρίνουμε με τον επιλογέα απογόνων. Έτσι: p i - θα επιλέξουμε όλα τα πλάγια μέσα στις παραγράφους, και έτσι: p > i - μόνο τα πλάγια, που είναι άμεσοι απόγονοι των παραγράφων.

Ας εφαρμόσουμε αυτόν τον επιλογέα στον HTML κώδικά μας:

cssp > i {
  color: red;
}

Αποτέλεσμα εκτέλεσης του κώδικα:

html<ul>
  <li>
    <i>πλάγια</i>
    <b>έντονα</b>
    <b><i>έντονα πλάγια</i></b>
  </li>
  <li>
    <i>πλάγια</i>
    <b>έντονα</b>
    <b><i>έντονα πλάγια</i></b>
  </li>
</ul>