Sąsiedni selektor w CSS

Sąsiedni selektor + pozwala wybrać element na podstawie jego sąsiada znajdującego się bezpośrednio przed nim.

Składnia

selektor1 + selektor2 {
	
}

Odniesiemy się do wszystkich znaczników p, znajdujących się bezpośrednio po znacznikach h2, i pokolorujemy je na czerwono:

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

h2 + p {
	color: red;
}

Odniesiemy się do wszystkich znaczników p, znajdujących się bezpośrednio po elementach z klasą .test, i pokolorujemy je na czerwono:

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

.test + p {
	color: red;
}

Odniesiemy się do wszystkich elementów z klasą .elem, znajdujących się bezpośrednio po elementach z klasą .test, i pokolorujemy je na czerwono:

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

.test + .elem {
	color: red;
}

Selektor dziecka,
który pozwala wybierać elementy na podstawie bezpośredniego zagnieżdżenia
Selektor potomka,
który pozwala wybrać element na podstawie jego rodzica
Selektor rodzeństwa,
który pozwala wybierać elementy znajdujące się po podanym elemencie
Selektor uniwersalny,
który pozwala wybrać wszystkie elementy