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;
}

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
</ul>

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

Compatibilité des navigateurs

[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

• Les sélecteurs d'éléments voisins