Sélecteur d'enfant en CSS

Supposons que nous ayons le code suivant :

html<p>
  texte <b><i>gras italique</i></b>
</p>
<p>
  texte <i>juste italique</i>
</p>

Supposons que nous voulions sélectionner toutes les balises i qui sont des descendants de paragraphes. Faisons-le :

cssp i {
  color: red;
}

Résultat de l'exécution du code :

Sélectionnons maintenant les balises i qui sont des descendants directs de nos paragraphes. Le sélecteur d'enfant > nous y aidera.

Pour comprendre comment l'utiliser, comparons-le au sélecteur de descendants. Comme ceci : p i - nous sélectionnerons toutes les italiques à l'intérieur des paragraphes, et comme ceci : p > i - seulement les italiques qui sont des descendants directs des paragraphes.

Appliquons ce sélecteur à notre code HTML :

cssp > i {
  color: red;
}

Résultat de l'exécution du code :

html<ul>
  <li>
    <i>italique</i>
    <b>gras</b>
    <b><i>gras italique</i></b>
  </li>
  <li>
    <i>italique</i>
    <b>gras</b>
    <b><i>gras italique</i></b>
  </li>
</ul>