Selektorët e Afërm në CSS

Selektori i afërm ~ ju lejon të zgjidhni të gjithë elementët që ndodhen pas një elementi të caktuar brenda një prindi të përbashkët.

Shembull

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 ato 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;
}

Jepet kodi:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li id="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Shkruani një selektor që do të zgjedhë të gjithë elementët, që ndodhen menjëherë pas elementit #elem.