Cette forme de sélecteur 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.

img + p {
  font-style: bold;
}

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

 

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple112171 2 Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui Oui Oui4 Oui Oui Oui

1. Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.

2. 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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, ffoodd
 Dernière mise à jour par : SphinxKnight,