Susedský selektor v CSS

Susedský selektor ~ umožňuje vybrať všetky prvky, ktoré sa nachádzajú za daným prvkom v rámci toho istého rodiča.

Syntax

selektor1 ~ selektor2 {
	
}

Obráťme sa na všetky elementy p, ktoré sa nachádzajú za elementmi h2 a nastavme im červenú farbu textu:

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

h2 ~ p {
	color: red;
}

Obráťme sa na všetky elementy p, ktoré sa nachádzajú za elementmi s triedou .test, a nastavme im červenú farbu textu:

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

.test ~ p {
	color: red;
}

Obráťme sa na všetky elementy s triedou .elem, ktoré sa nachádzajú za elementmi s triedou .test, a nastavme im červenú farbu textu:

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

.test ~ .elem {
	color: red;
}

DCérsky selektor,
ktorý umožňuje vybrať prvky podľa priameho vnorenia
Kontextový selektor,
ktorý umožňuje vybrať prvok podľa jeho rodiča
Susediaci selektor,
ktorý umožňuje vybrať prvok podľa jeho bezprostredného suseda
Univerzálny selektor,
ktorý umožňuje vybrať všetky prvky