CSS में id का उपयोग
id का उपयोग करते समय वे सभी
चयनकर्ता हेरफेर उपलब्ध हैं जिन्हें हमने
पिछले पाठों में सीखा था।
उदाहरण
मान लीजिए कि हमारे पास निम्नलिखित कोड है:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
आइए id वाले तत्व से h2 को चुनें,
जो block के बराबर है, और इसे लाल
रंग में रंग दें:
#block h2 {
color: red;
}
और अब आइए id वाले तत्व से p को चुनें,
जो block के बराबर है, और इसे हरे
रंग में रंग दें:
#block p {
color: green;
}
उदाहरण
मान लीजिए कि अब हमारे पास निम्नलिखित कोड है:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
आइए header वर्ग वाले तत्वों को चुनें,
जो id वाले तत्व के अंदर स्थित हैं,
जो block के बराबर है, और उन्हें
लाल रंग में रंग दें:
#block .header {
color: red;
}
और अब header वर्ग वाले h2 शीर्षकों को चुनें,
जो id वाले तत्व के अंदर स्थित हैं,
जो block के बराबर है, और उन्हें
लाल रंग में रंग दें:
#block h2.header {
color: red;
}
व्यावहारिक समस्याएं
एक चयनकर्ता लिखें जो सभी h2 को चुने,
जो id वाले तत्व में स्थित हैं, जो
elem के बराबर है। अपने चयनकर्ता की जाँच निम्नलिखित
कोड पर करें:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
एक चयनकर्ता लिखें जो text वर्ग वाले सभी तत्वों को चुने,
जो id वाले तत्व में स्थित हैं,
जो elem के बराबर है। अपने
चयनकर्ता की जाँच निम्नलिखित कोड पर करें:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
एक चयनकर्ता लिखें जो text वर्ग वाले सभी पैराग्राफ को चुने,
जो id वाले तत्व में स्थित हैं,
जो elem के बराबर है। अपने
चयनकर्ता की जाँच निम्नलिखित कोड पर करें:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
एक चयनकर्ता लिखें जो text वर्ग वाले सभी li को चुने,
जो id वाले तत्व में स्थित हैं,
जो elem के बराबर है। अपने
चयनकर्ता की जाँच निम्नलिखित कोड पर करें:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
