कई अभिभावकों में नेस्टेड एनएच-चाइल्ड तत्वों को स्टाइल करना

अलग-अलग मूल संरचनाओं के भीतर विशिष्ट नेस्टेड तत्वों को स्टाइल करने के समाधान की तलाश में, निम्नलिखित मार्कअप पर विचार करें :

• one
• two

• three

• four

लक्ष्य शैलियों को "एक" और "तीन" पर लागू करना है, भले ही वे पहले बच्चे हों प्रत्येक

के।

:nth-child() की सीमा

:nth-child() का उपयोग करने के प्रयास कम पड़ जाते हैं क्योंकि यह केवल उन तत्वों पर लागू होता है जो समान अभिभावक साझा करें. इस परिदृश्य में, सीएसएस चयनकर्ता .foo li:nth-child(1), .foo li:nth-child(3) केवल प्रत्येक

के पहले बच्चों को लक्षित करेगा।

वैकल्पिक समाधान

जावास्क्रिप्ट:

jQuery जैसी लाइब्रेरी का उपयोग करने से आप जावास्क्रिप्ट की शक्तिशाली फ़िल्टरिंग क्षमताओं का उपयोग करके तत्वों का चयन कर सकते हैं। उदाहरण के लिए, निम्नलिखित स्क्रिप्ट .foo कंटेनर के भीतर पहले और तीसरे

• तत्वों को लक्षित करेगी:

  $('.foo li:eq(0), .foo li:eq(2)')

  स्पष्ट तत्व अंकन:

  आप सीएसएस के माध्यम से उनके चयन को सक्षम करने के लिए कक्षाओं या आईडी के साथ वांछित तत्वों को स्पष्ट रूप से चिह्नित कर सकते हैं। उदाहरण के लिए, पहले और तीसरे

• तत्वों में कक्षाएं जोड़ना:

• one
• two

फिर, आप चिह्नित तत्वों को लक्षित करने के लिए सीएसएस का उपयोग कर सकते हैं:

.foo .first,
.foo .third {
    color: red;
}