सीएसएस में वंशज चयनकर्ता

मान लीजिए हमारे पास एक ul सूची और एक ol सूची है:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

आइए इन सूचियों में li टैग को लाल रंग में रंगें:

cssli {
  color: red;
}

अब मान लीजिए कि हम ul सूची के li टैग को लाल रंग में रंगना चाहते हैं, और ol सूची के li टैग को हरे रंग में।

इस मामले में, वंशज चयनकर्ता हमारी मदद करेगा। यह उनके मूल तत्व के आधार पर टैग चुनने की अनुमति देता है। ऐसा करने के लिए, मूल तत्व का चयनकर्ता निर्दिष्ट करना होगा, और उसके बाद एक स्थान छोड़कर - वंशज का चयनकर्ता। हमारे मामले में, ul li चयनकर्ता ul सूची के सभी li टैग चुनेगा, और ol li चयनकर्ता - ol सूची के सभी li टैग चुनेगा। आइए उन्हें आवश्यक रंगों में रंगें:

cssul li {
  color: red;
}
ol li {
  color: green;
}

वंशज चयनकर्ता में केवल दो टैग चयनकर्ता होने आवश्यक नहीं हैं - उनमें कोई भी संख्या हो सकती है, जो स्थान से अलग की गई हो। उदाहरण के लिए, निम्नलिखित कोड में, सभी i टैग चुने जाते हैं, जो li टैग के अंदर स्थित हैं, जो बदले में ul टैग के अंदर स्थित हैं:

cssul li i {
  color: red;
}

html<ul>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
</ul>

<p>
  paragraph text <i>italic</i>
</p>
<p>
  paragraph text <i>italic</i>
</p>

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