Sélecteur ENFANT

Rôle

Le sélecteur enfant permet de cibler les éléments qui sont à l’intérieur d’un élément parent.

Note : Contrairement au sélecteur descendant, les éléments cibles doivent être les enfants directs du parent (le niveau hiérarchique juste en dessous du parent).

Dans l’exemple ci-dessous, seul le paragraphe avec le contenu « enfant enfant.. » sera rouge.

#header>p{
    color: red;
}

Code HTML

<div id="header">
    <p> enfant enfant enfant enfant ..</p>
    <div>
        <p> lorem impsum <em>important</em> lorem impsum ..</p>
    </div>
</div>

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

article>p{
    color: red;
}

– Le code HTML

<article>
  <h1>Titre</h1>
  <p>Lorem dolor sit amet</p>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
  </div>
</article>

Résultat

Dans cet exemple, seul le paragraphe enfant direct de l’article est rouge

Compatibilité

Le sélecteur enfant est pris en charge par tous les principaux navigateurs

A voir aussi

#id (sélecteur id)
.class (sélecteur class)
#head p>em (sélecteur contextuel)
p (sélecteur balise)
p,h1 (sélecteur multiple)
* (sélecteur universel)
p a (sélecteur descendant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)