Combinateur de voisins directs
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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 element parent.
/* Ne cible que les paragraphes situés directement après une image */
img + p {
font-style: bold;
}
Syntaxe
/* L'espace blanc autour du combinateur + est facultatif mais recommandé. */
former_element + target_element {
/* propriétés de style */
}
Exemples
Utilisation simple
Cet exemple montre comment sélectionner le voisin direct suivant si ce voisin direct est d'un type spécifique.
CSS
Nous appliquons uniquement la mise en forme au <li> qui vient immédiatement après un <li> qui est le premier de son type :
li:first-of-type + li {
color: red;
font-weight: bold;
}
HTML
<ul>
<li>Un</li>
<li>Deux !</li>
<li>Trois</li>
</ul>
Résultat
Sélectionner le voisin précédent
Le combinateur de voisin direct peut être inclus dans le sélecteur fonctionnel :has() pour sélectionner le voisin précédent.
CSS
Nous appliquons uniquement la mise en forme au <li> qui possède un voisin direct suivant qui est un <li> et qui est le dernier de son type :
li:has(+ li:last-of-type) {
color: red;
font-weight: bold;
}
HTML
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois !</li>
<li>Quatre</li>
</ul>
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # adjacent-sibling-combinators |