Combinateur de voisins directs

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

BCD tables only load in the browser

Voir aussi