पसूडोक्लास nth-child
पसूडोक्लास nth-child उस एलिमेंट को सिलेक्ट करता है,
जो अपने पैरेंट का n-वाँ चाइल्ड है।
सिंटैक्स
सिलेक्टर:nth-child(संख्या | odd | even | एक्सप्रेशन) {
}
वैल्यूज
| वैल्यू | डिस्क्रिप्शन |
|---|---|
| संख्या |
1 से शुरू होने वाला पॉजिटिव नंबर।
उस एलिमेंट की पोजीशन स्पेसिफाई करता है, जिसे टारगेट करना है।
एलिमेंट्स की नंबरिंग 1 से शुरू होती है।
|
odd |
विषम (odd) एलिमेंट्स। |
even |
सम (even) एलिमेंट्स। |
| एक्सप्रेशन |
अक्षर n के साथ स्पेशल एक्सप्रेशन बना सकते हैं,
जो शून्य से (एक से नहीं) लेकर अनंत तक सभी इंटीजर नंबर रिप्रेजेंट करता है।
इस तरह, 2n का मतलब है सभी सम नंबर (दूसरे से शुरू होकर)।
इसे कैसे समझें? n में 0 से शुरू करके क्रमिक रूप से नंबर सब्स्टिट्यूट करें:
अगर n = 0, तो 2n 0 देगा - ऐसा कोई एलिमेंट नहीं है (एलिमेंट्स की नंबरिंग 1 से है),
अगर n = 1, तो 2n 2 देगा - दूसरा एलिमेंट, अगर n = 2,
2n 4 देगा - चौथा एलिमेंट। अगर 3n लिखें - यह
हर तीसरा एलिमेंट होगा (तीसरे से शुरू होकर), और इसी तरह आगे।
|
उदाहरण
इस उदाहरण में हम उस li का रंग लाल करेंगे,
जो अपने पैरेंट का 4-वाँ चाइल्ड है:
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:nth-child(4) {
color: red;
}
:
उदाहरण
अब सभी सम (even) li लाल करेंगे:
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:nth-child(even) {
color: red;
}
:
उदाहरण
अब सभी विषम (odd) li लाल करेंगे:
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
उदाहरण
अब हर तीसरी li लाल करेंगे
(तीसरी से शुरू होकर):
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
उदाहरण
सिलेक्टर में एलिमेंट्स की एक रेंज स्पेसिफाई कर सकते हैं।
मान लीजिए, आपके पास 20 एलिमेंट्स की एक लिस्ट है
और 7 से 14 तक के एलिमेंट्स (इनक्लूसिव) सिलेक्ट करने हैं।
यह इस तरह से किया जा सकता है:
<ol>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
