Sélecteur de voisin direct

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,