A + B
Le signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
Exemple
#h3 + p {
font-size: 17px;
color: #fff;
}<style>
:where(article) h3 { margin: 0 0 6px; }
:where(article) p { margin: 0 0 6px; color: #a1a1aa; }
</style>
<article class="stage">
<h3>Les sélecteurs en pratique</h3>
<p>Le premier paragraphe après le titre est plus grand et plus clair.</p>
<p>Les paragraphes suivants ont une apparence ordinaire, car ils ne se trouvent pas juste après le titre.</p>
</article>Définition et utilisation
#Le combinateur de voisin direct, aussi appelé combinateur de frère suivant, relie deux éléments placés juste l’un à côté de l’autre. L’écriture h2 + p touche le paragraphe qui suit immédiatement un titre h2, mais pas les paragraphes suivants, ni un paragraphe séparé par un autre élément.
Les deux éléments doivent avoir le même parent, et B doit se trouver après A, jamais avant. Le texte et les commentaires entre eux ne comptent pas, seuls les éléments comptent.
Les usages typiques sont la mise en valeur du premier paragraphe après un titre, l’espacement entre des éléments voisins (li + li), et la réaction à l’état d’un champ de formulaire : input:checked + label change l’étiquette qui se trouve juste après un champ coché.
CSS n’a pas de combinateur distinct pour le voisin précédent. Quand vous voulez styliser un élément qui se trouve avant un autre, utilisez :has() : h2:has(+ p) sélectionne un titre suivi d’un paragraphe.
Syntaxe
#A + B { propriété: valeur; }Exemples de sélecteurs
#- Seulement l’élément qui se trouve juste après
.start. Le 4 ne correspond plus. - Chaque
spanimmédiatement précédé d’un autrespan. Le 6 est exclu, car son prédécesseur est unem. - Les combinateurs s’enchaînent : ici, le deuxième élément après
.start. - Chaque enfant du cadre qui a un prédécesseur. Seul le premier élément reste gris, c’est pourquoi ce motif sert à l’espacement entre les éléments.
Exemples de sélecteurs en pratique
#.start + span
.start. Le 4 ne correspond plus..start + span { background: #7c3aed; color: #fff; }span + span
span immédiatement précédé d’un autre span. Le 6 est exclu, car son prédécesseur est un em.span + span { background: #7c3aed; color: #fff; }.start + span + span
.start..start + span + span { background: #7c3aed; color: #fff; }.demo > * + *
.demo > * + * { background: #7c3aed; color: #fff; }Plus d’exemples
#.option input:checked + label {
border-color: #a78bfa;
background: rgb(124 58 237 / 0.2);
color: #fff;
}<style>
.option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.option label { flex: 1; padding: 8px 12px; border: 2px solid #3f3f46; border-radius: 10px; color: #a1a1aa; cursor: pointer; }
</style>
<div class="option"><input type="radio" name="plan" id="plan-1" checked><label for="plan-1">Forfait mensuel</label></div>
<div class="option"><input type="radio" name="plan" id="plan-2"><label for="plan-2">Forfait annuel</label></div>Cliquez sur la deuxième option. Le style passe à l’étiquette qui se trouve juste après le champ coché.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour l’espacement entre les éléments d’une liste,
li + li { margin-top: 8px; }suffit : le premier élément ne recevra pas de marge superflue. Dans les conteneurs flex et grid,gapest plus simple. - Pour les champs de formulaire, conservez l’ordre en HTML : d’abord
input, puislabel. Le combinateur ne fonctionne que vers l’avant. - Vous sélectionnerez le voisin précédent avec
:has(), par exemplelabel:has(+ input:invalid)est une étiquette qui se trouve avant un champ invalide.
Entrées associées
#- A ~ BLe signe ~ sélectionne tous les éléments B qui se trouvent n’importe où après l’élément A et partagent le même parent que lui.
- A > BLe signe > sélectionne les éléments B qui sont des enfants directs de l’élément A, c’est-à-dire situés exactement un niveau plus bas.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :checkedCorrespond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
- *L’astérisque correspond à chaque élément. Il sert aux réinitialisations de styles et aux règles qui visent tous les enfants d’un conteneur donné.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.