Selektor rodzeństwa w CSS

Selektor rodzeństwa ~ pozwala wybrać wszystkie elementy znajdujące się po podanym elemencie wewnątrz tego samego rodzica.

Składnia

selektor1 ~ selektor2 {
	
}

Odnówmy się do wszystkich tagów p, znajdujących się po tagach h2 i pokolorujmy je na czerwono:

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

h2 ~ p {
	color: red;
}

Odnówmy się do wszystkich tagów p, znajdujących się po elementach z klasą .test, i pokolorujmy je na czerwono:

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

.test ~ p {
	color: red;
}

Odnówmy się do wszystkich elementów z klasą .elem, znajdujących się po elementach z klasą .test i pokolorujmy je na czerwono:

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

.test ~ .elem {
	color: red;
}

Selektor dziecka,
który pozwala wybrać elementy według bezpośredniego zagnieżdżenia
Selektor kontekstowy,
który pozwala wybrać element według jego rodzica
Selektor sąsiedniego rodzeństwa,
który pozwala wybrać element według jego sąsiada
Selektor uniwersalny,
który pozwala wybrać wszystkie elementy