5.6 Les sélecteurs d'enfant
Un sélecteur d'enfant se vérifie quand un élément est l'enfant d'un autre élément. Celui-ci se compose de deux sélecteurs, ou plus, séparés par le caractère ">".
La règle suivante applique un style à tous les enfants P de l'élément BODY :
Code:
1
2
|
BODY > P { line-height: 1.3 } |
Dans cet exemple-ci, on a combiné un sélecteur descendant et un sélecteur d'enfant :
Cette règle concerne tout élément P qui est un descendant d'un élément LI, celui-ci devant être l'enfant d'un élément OL qui, à son tour, doit être un descendant de l'élément DIV. Noter l'absence de caractères blancs, facultatifs, autour de la combinateur ">".
Pour des renseignements sur la façon de sélectionner le premier enfant d'un élément, voir le chapitre sur la pseudo-classe :first-child plus loin.
5.7 Les sélecteurs d'enfants adjacents
Les sélecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l'arbre du document et quand E1 y précède immédiatement E2.
Selon le contexte, les éléments adjacents génèrent un formatage des objets dont la mise en forme est gérée automatiquement (ex. les marges verticales des boîtes adjacentes qui fusionnent). Avec le combinateur "+", les auteurs peuvent ajouter des styles aux éléments adjacents.
En exemple, cette règle précise qu'un élément P qui suit un élément MATH ne devrait pas avoir d'alinéa :
Code:
MATH + P { text-indent: 0 }
Le suivant produit une réduction de l'espace vertical entre un élément H1 et l'élément H2 qui le suit juste après :
Code:
H1 + H2 { margin-top: -5mm }
Ici, la règle est similaire à la précédente, à la différence qu'elle comporte un sélecteur d'attribut en plus. Ainsi, une mise en forme particulière s'applique aux éléments H1 avec un attribut class="opener" :
Code:
1
2
|
H1.opener + H2 { margin-top: -5mm } |
