Sélecteur enfant en CSS

Le sélecteur enfant > permet de sélectionner les éléments par imbrication directe les uns dans les autres.

Syntaxe

csssélecteur1 > sélecteur2 {
  
}

Exemple

Ciblons toutes les balises b directement situées à l'intérieur des balises p, et colorons-les en rouge :

html<p>
  texte <b>+</b>
</p>
<p>
  texte <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Exemple

Ciblons toutes les balises b directement situées à l'intérieur des éléments ayant la classe .block, et colorons-les en rouge :

html<p class="block">
  texte <b>+</b>
</p>
<p class="block">
  texte <i><b>-</b></i>
</p>
<p>
  texte <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Exemple

Ciblons tous les éléments ayant la classe .elem, directement situés à l'intérieur des éléments ayant la classe .block, et colorons-les en rouge :

html<p class="block">
  texte <span class="elem">+</span>
</p>
<p class="block">
  texte <i><span class="elem">-</span></i>
</p>
<p class="block">
  texte <span>-</span>
</p>
<p>
  texte <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

Voir aussi