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

sélecteur1 > sélecteur2 {
	
}

Exemple

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

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

p > 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 :

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

.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 :

<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>

.block > .elem {
	color: red;
}

Voir aussi

Sélecteur descendant,
qui permet de sélectionner un élément par son parent
Sélecteur de frère adjacent,
qui permet de sélectionner un élément par son voisin direct
Sélecteur de frères,
qui permet de sélectionner les éléments après un élément donné
Sélecteur universel,
qui permet de sélectionner tous les éléments