Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

Combinateur de voisin direct

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

/* Ne cible que les paragraphes situé directement après une image */
img + p {
  font-style: bold;
}

Syntaxe

premier_element + element_cible { styles }

Exemples

CSS

li:first-of-type + li {
  color: red;
}

HTML

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

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 Renomme ce sélecteur en « next-sibling combinator ».
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

BCD tables only load in the browser

Voir aussi