Sélecteur d'enfants
Syntaxe S1
> S2
div > p {
margin-bottom: 0;
font-family: verdana;
}
Le combinateur > permet de sélectionner les
éléments enfants d'un autre élément.
La sélection s'arrête donc au premier niveau d'imbrication des
éléments.
L'élément parent est le premier sélecteur et ses enfants sont obtenus par le deuxième sélecteur.
div > strong { ... }
se lit : je cherche tous les éléments strong
qui ont pour parent un élément div
Avec le code HTML
<p>Texte <strong>un</strong></p> <div> Texte <strong>deux</strong> <p>Texte <strong>trois</strong></p> Texte <strong>quatre</strong> </div>
seul "deux" et "quatre" sont des enfants et seront sélectionnés avec la règle précédente. Les autres éléments strong sont soit en dehors du div, soit des petits-enfants
Les sélecteurs utilisés dans la règle peuvent être de n'importe quel type ( simples, d'attributs, des pseudo classes, des pseudo éléments).
#remarque > a.trop-la-classe { ... } se lit :
je cherche tous les éléments a avec la
classe trop-la-classe qui sont enfants de l'élément
dont l'attribut id à la valeur remarque.
L'exemple suivant entoure d'une bordure les éléments li qui sont les enfants d'éléments ol. On remarquera la sélection s'arrête aux premiers li des listes imbriquées ol ul.
