Selektor Vëllezëror në CSS

Selektori vëllezëror ~ lejon zgjedhjen e të gjithë elementëve që ndodhen pas një elementi të caktuar brenda një prindi të përbashkët.

Sintaksa

selektori1 ~ selektori2 {
	
}

Le t'i drejtohemi të gjithë etiketave p, që ndodhen pas etiketave h2, dhe t'i ngjyrosim ato në të kuqe:

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

h2 ~ p {
	color: red;
}

Le t'i drejtohemi të gjithë etiketave p, që ndodhen pas elementeve me klasën .test, dhe t'i ngjyrosim ato në të kuqe:

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

.test ~ p {
	color: red;
}

Le t'i drejtohemi të gjithë elementeve me klasën .elem, që ndodhen pas elementeve me klasën .test, dhe t'i ngjyrosim në të kuqe:

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

.test ~ .elem {
	color: red;
}

Selektori Fëmijë,
që lejon zgjedhjen e elementeve sipas përkatësisë së drejtpërdrejtë
Selektori Kontekstual,
që lejon zgjedhjen e një elementi sipas prindit të tij
Selektori Fqinj,
që lejon zgjedhjen e një elementi sipas fqinjit të tij
Selektori Universal,
që lejon zgjedhjen e të gjithë elementëve