Auteur: Jérôme Forget. Publié le 6 mars 2007.
Le sélecteur d'enfants adjacents permet d'appliquer un style à un élément qui suit immédiatement un autre élément avec le même parent. Cela peut permettre, par exemple, d'appliquer un style sur le paragraphe qui suit immédiatement un titre ou d'appliquer une marge particulière à une liste qui suivrait un paragraphe.
Le sélecteur d'enfants adjacents est représenté par le symbole +.
h2 + p { margin-top : 0; }
Ce sélecteur va donc appliquer une marge supérieure nulle à un paragraphe qui suit immédiatement un titre h2 en partageant le même parent.
Évidemment, le sélecteur d'enfants adjacents peut être utilisé en combinaison avec d'autres sélecteurs. Voyons un exemple :
html > body div#contenu p + ul { margin-top: 1.5em; }
Ce sélecteur se traduit par l'expression « sélectionne une liste quand elle suit immédiatement un paragraphe qui est un descendant de l'élément body, lui-même un enfant de l'élément html.