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

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

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

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

cssp i {
  color: red;
}

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

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

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

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

cssp > i {
  color: red;
}

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

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