Kichaguzi cha Ndugu katika CSS

Kichaguzi cha ndugu ~ huruhusu kuchagua vipengele vyote vinavyopata baada ya kipengele kilichobainishwa ndani ya mzazi mmoja.

Syntax

kichaguzi1 ~ kichaguzi2 {
	
}

Mfano

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

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

h2 ~ p {
	color: red;
}

Mfano

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

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

.test ~ p {
	color: red;
}

Mfano

Wacha tuelekeze kwenye vipengele vyote vilivyo na darasa .elem, vinavyopata baada ya vipengele vilivyo na darasa .test, na kuwarakabisha kwa 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;
}

Angalia pia

Kichaguzi cha Mtoto,
ambacho huruhusu kuchagua vipengele kulingana na uingizwaji wa moja kwa moja
Kichaguzi cha Mazingira,
ambacho huruhusu kuchagua kipengele kulingana na mzazi wake
Kichaguzi cha Jirani,
ambacho huruhusu kuchagua kipengele kulingana na jirani yake
Kichaguzi cha Ulimwengu,
ambacho huruhusu kuchagua vipengele vyote