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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Adjacent sibling combinator (A + B)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 7
Notes
Support complet 7
Notes
Notes Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.
Notes In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.
Opera Support complet OuiSafari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi