Селектори хешоварӣ дар CSS

Селектори хешоварӣ ~ барои интихоби тамоми элементҳое, ки баъд аз элементҳои додашуда дар дохили як волидайн қарор доранд, истифода мешавад.

Намуна

Биёед ба тамоми тегҳои p, ки баъд аз тегҳои h2 қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

<div>
	<h2>матн</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Намуна

Биёед ба тамоми тегҳои p, ки баъд аз элементҳои бо синфи .test қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

<div>
	<p class="test">
		матн
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

Намуна

Биёед ба тамоми элементҳои бо синфи .elem, ки баъд аз элементҳои бо синфи .test қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

<div>
	<p class="test">
		матн
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

Масъалаҳои амалӣ

Код дода шудааст:

<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>

Селектореро нависед, ки тамоми элементҳои баъд аз элементҳои #elem-ро интихоб кунад.