कई अभिभावकों के बीच विशिष्ट nth-बच्चों की स्टाइलिंग

nth-child चयनकर्ता का उपयोग करके नेस्टेड तत्वों को स्टाइल करते समय, यह ध्यान रखना महत्वपूर्ण है कि चयनकर्ता एकल मूल संदर्भ में कार्य करता है। कई अभिभावकों में विशिष्ट बाल तत्वों को लक्षित करते समय यह चुनौतियों का कारण बन सकता है।

मुद्दा:

निम्नलिखित मार्कअप पर विचार करें:

    
one
        
two
    
three
    
four
    

लक्ष्य .foo के भीतर पहले और तीसरे ली तत्वों को स्टाइल करना है। निम्नलिखित सीएसएस का उपयोग करना:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

यह दृष्टिकोण काम नहीं करेगा क्योंकि nth-child प्रत्येक ul के पहले और तीसरे बच्चे का चयन करता है।

समाधान:

CSS का उपयोग करना अकेले, एकाधिक माता-पिता के nवें-बच्चों को लक्षित करना संभव नहीं है। हालाँकि, वैकल्पिक समाधान भी हैं:

• जावास्क्रिप्ट: jQuery जैसी लाइब्रेरी DOM तत्वों में हेरफेर करना और विशिष्ट तत्वों का चयन करना आसान बनाती है, जैसे $('.foo li:eq( 0), .foo li:eq(2)').
• स्पष्ट मार्कअप: इसमें कक्षाएं या आईडी जोड़ें पहला और तीसरा ली तत्व स्पष्ट रूप से, जैसे:

    
one
        
two
    
three
    
four
    

फिर, नई जोड़ी गई कक्षाओं का उपयोग करके उन्हें स्टाइल करें:

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