सीएसएस में चाइल्ड सेलेक्टर

मान लीजिए कि हमारे पास निम्नलिखित कोड है:

<p>
	text <b><i>bold italic</i></b>
</p>
<p>
	text <i>just italic</i>
</p>

मान लीजिए कि हम उन सभी i टैगों को चुनना चाहते हैं, जो पैराग्राफ के वंशज हैं। आइए इसे करें:

p i {
	color: red;
}

कोड निष्पादन का परिणाम:

आइए अब उन i टैगों को चुनें, जो हमारे पैराग्राफ के सीधे वंशज हैं। इसमें चाइल्ड सेलेक्टर > हमारी मदद करेगा।

यह समझने के लिए कि इसका उपयोग कैसे करें, आइए इसकी तुलना वंशज सेलेक्टर से करें। इस तरह: p i - हम पैराग्राफ के अंदर के सभी इटैलिक को चुनेंगे, और इस तरह: p > i - केवल वे इटैलिक जो पैराग्राफ के सीधे वंशज हैं।

आइए इस सेलेक्टर को हमारे HTML कोड पर लागू करें:

p > i {
	color: red;
}

कोड निष्पादन का परिणाम:

निम्नलिखित कोड दिया गया है:

<ul>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
	<li>
		<i>italic</i>
		<b>bold</b>
		<b><i>bold italic</i></b>
	</li>
</ul>

केवल उन b टैगों को लाल रंग में रंगें, जो li टैगों के सीधे वंशज हैं।