Sélecteur adjacent en CSS

Le sélecteur adjacent + permet de sélectionner un élément en fonction de son voisin du dessus.

Syntaxe

sélecteur1 + sélecteur2 {
	
}

Exemple

Appliquons un style à toutes les balises p qui se trouvent immédiatement après les balises h2 et colorons-les en rouge :

<h2>texte</h2>
<p>
	+
</p>
<p>
	-
</p>
<p>
	-
</p>

h2 + p {
	color: red;
}

Exemple

Appliquons un style à toutes les balises p qui se trouvent immédiatement après les éléments ayant la classe .test et colorons-les en rouge :

<p class="test">
	texte
</p>
<p>
	+
</p>
<p>
	-
</p>

.test + p {
	color: red;
}

Exemple

Appliquons un style à tous les éléments ayant la classe .elem, qui se trouvent immédiatement après les éléments ayant la classe .test, et colorons-les en rouge :

<p class="test">
	texte
</p>
<p class="elem">
	+
</p>
<p>
	-
</p>

.test + .elem {
	color: red;
}

Voir aussi

Sélecteur d'enfant,
qui permet de sélectionner les éléments par imbrication directe
Sélecteur contextuel,
qui permet de sélectionner un élément en fonction de son parent
Sélecteur de frères et sœurs général,
qui permet de sélectionner les éléments après un élément donné
Sélecteur universel,
qui permet de sélectionner tous les éléments