Kichaguzi cha Ndugu katika CSS

Kichaguzi cha ndugu ~ huruhusu kuchagua vipengele vyote vilivyo baada ya kipengee kilichobainishwa ndani ya mzazi mmoja.

Mfano

Wacha tuelekeze kwa vitambulisho vyote p, vilivyo baada ya vitambulisho h2, na kuwarakabisha rangi nyekundu:

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

h2 ~ p {
	color: red;
}

Wacha tuelekeze kwa vitambulisho vyote p, vilivyo baada ya vipengee vilivyo na darasa .test, na kuwarakabisha rangi nyekundu:

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

.test ~ p {
	color: red;
}

Wacha tuelekeze kwa vipengele vyote vilivyo na darasa .elem, vilivyo baada ya vipengee vilivyo na darasa .test, na kuwarakabisha rangi nyekundu:

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

.test ~ .elem {
	color: red;
}

Imetolewa kificho:

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

Andika kichaguzi ambacho kitachagua vipengele vyote, vilivyo baada ya kipengee #elem.