Cette forme de sélecteur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné.
Syntaxe
premier_element + element_cible { styles }
Exemples
Exemple simple
CSS
li:first-of-type + li { color: red; }
HTML
<ul> <li>Un</li> <li>Deux</li> <li>Trois</li> </ul>
Résultat
Exemple avec des classes
On peut également utiliser cette forme de sélecteur pour mettre en forme un élément span
qui servirait de légende aux éléments <img>
précédents.
CSS
/* On sélectionne les éléments span de la classe caption si ceux-ci suivent un élément img */ img + span.caption { font-style: italic; }
HTML
<img src="photo1.jpg"> <span class="caption">Une première photo</span> <img src="photo2.jpg"> <span class="caption">Une seconde photo</span>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de 'next-sibling combinator' dans cette spécification. |
Version de travail | |
Selectors Level 3 La définition de 'Adjacent sibling combinator' dans cette spécification. |
Recommendation | |
CSS Level 2 (Revision 1) La définition de 'Adjacent sibling selectors' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | (Oui) | (Oui) | 7.0[1] | (Oui) | (Oui) |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 2.1 | (Oui) | ? | (Oui) | (Oui) |
[1] Internet Explorer 7 ne met pas correctement à jour les styles lorsqu'un élément est placé dynamiquement avant un élément qui correspond au sélecteur. Sur Internet Explorer 8, si un élément est inséré dynamiquement en cliquant sur un lien, le style correspondant au premier enfant (:first-child
) n'est pas appliqué avant que le lien ne perde le focus.
Voir aussi
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
ffoodd
Dernière mise à jour par :
SphinxKnight,