Combinateur de voisins directs

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Le combinateur de voisin direct (+) sépare deux sélecteurs et ne fait correspondre le second élément que s'il suit immédiatement le premier élément, et si les deux sont des enfants du même élément parent.

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

Syntaxe

css
/* L'espace blanc autour du combinateur + est facultatif mais recommandé. */
premier_element + second_element { propriétés de style }

Exemples

CSS

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

HTML

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

Résultat

Spécifications

Specification
Selectors Level 4
# adjacent-sibling-combinators

Compatibilité des navigateurs

Voir aussi