Sélecteur de frères en CSS

Le sélecteur de frères ~ permet de sélectionner tous les éléments qui se trouvent après l'élément donné à l'intérieur d'un même parent.

Syntaxe

sélecteur1 ~ sélecteur2 {
	
}

Sélectionnons toutes les balises p qui se trouvent après les balises h2, et colorons-les en rouge :

<div>
	<h2>text</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Sélectionnons toutes les balises p qui se trouvent après les éléments avec la classe .test, et colorons-les en rouge :

<div>
	<p class="test">
		text
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Sélectionnons tous les éléments avec la classe .elem, qui se trouvent après les éléments avec la classe .test, et colorons-les en rouge :

<div>
	<p class="test">
		text
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

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 par son parent
Sélecteur de frère adjacent,
qui permet de sélectionner un élément par son voisin
Sélecteur universel,
qui permet de sélectionner tous les éléments