सीएसएस में सामान्य सहोदर चयनकर्ता

सामान्य सहोदर चयनकर्ता ~ एक ही मूल तत्व के अंदर निर्दिष्ट तत्व के बाद स्थित सभी तत्वों का चयन करने की अनुमति देता है।

वाक्य रचना

चयनकर्ता1 ~ चयनकर्ता2 {
	
}

आइए h2 टैग्स के बाद स्थित सभी p टैग्स को संबोधित करें और उन्हें लाल रंग में रंग दें:

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

h2 ~ p {
	color: red;
}

आइए .test वर्ग वाले तत्वों के बाद स्थित सभी p टैग्स को संबोधित करें और उन्हें लाल रंग में रंग दें:

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

.test ~ p {
	color: red;
}

आइए .test वर्ग वाले तत्वों के बाद स्थित .elem वर्ग वाले सभी तत्वों को संबोधित करें और उन्हें लाल रंग में रंग दें:

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

.test ~ .elem {
	color: red;
}

चाइल्ड चयनकर्ता,
जो सीधे नेस्टिंग के आधार पर तत्वों का चयन करने की अनुमति देता है
वंशज चयनकर्ता,
जो किसी तत्व को उसके मूल तत्व के आधार पर चयन करने की अनुमति देता है
आसन्न सहोदर चयनकर्ता,
जो किसी तत्व को उसके पड़ोसी के आधार पर चयन करने की अनुमति देता है
यूनिवर्सल चयनकर्ता,
जो सभी तत्वों का चयन करने की अनुमति देता है