मैं CSS का उपयोग करके एक विशिष्ट संख्या में बच्चा कैसे प्राप्त कर सकता हूं?

Question

मैं एक है tableजिसका tdरों डायनामिक रूप से तैयार कर रहे हैं। मुझे पता है कि पहला और आखिरी बच्चा कैसे मिलेगा लेकिन मेरा सवाल यह है:

क्या सीएसएस का उपयोग करके दूसरा या तीसरा बच्चा प्राप्त करने का एक तरीका है?

Answer 1

आधुनिक ब्राउज़रों, उपयोग के लिए td:nth-child(2)दूसरे के लिए td, और td:nth-child(3)तीसरे के लिए। याद रखें कि ये td प्रत्येक पंक्ति के लिए दूसरा और तीसरा प्राप्त करते हैं ।

यदि आपको संस्करण 9 से पुराने IE के साथ संगतता की आवश्यकता है, तो टिम द्वारा सुझाए गए सिबलिंग कॉम्बिनेटर या जावास्क्रिप्ट का उपयोग करें । इस विधि से संबंधित स्पष्टीकरण के लिए मेरे उत्तर को भी देखें और उसकी विधि का चित्रण करें।

Comments

यह मत भूलो कि यह केवल CSS 3 चयनकर्ताओं के साथ काम करता है (दूसरे शब्दों में, 9 से पहले IE के संस्करणों में नहीं)।

— 14:14 पर zneak

जल्द ही अतीत की एक चिंता ... इस पर मेरी भावनाएं ।

— क्लारस डिग्नस

एक सामान्य समाधान के रूप में, td:nth-of-type(3)बेहतर है। td:nth-child(3)एक तत्व है कि है की पूर्ति करेंगे, दोनों एक td और इसके जनक के तीसरे बच्चे, अपने पिछले दो भाई-बहनों में तत्व प्रकार की परवाह किए बिना । td:nth-of-type(3)तीसरा मिलेगा td, चाहे tdइससे पहले कितने भी गैर- तत्व क्यों न हों । यदि tdआप चाहते हैं कि इससे पहले कोई गैर तत्व नहीं हैं, तो दोनों चयनकर्ता एक ही चीज से मेल खाएंगे।

— CJ डेनिस

Answer 2

IE 7 और 8 के लिए (और CSS3 के बिना IE6 सहित अन्य ब्राउज़र का समर्थन नहीं) आप 2 और 3 के बच्चों को प्राप्त करने के लिए निम्नलिखित का उपयोग कर सकते हैं:

दूसरा बच्चा:

td:first-child + td

तीसरा बच्चा:

td:first-child + td + td

फिर + tdआप जिस भी अतिरिक्त बच्चे का चयन करना चाहते हैं उसके लिए बस एक और जोड़ें ।

यदि आप IE6 का समर्थन करना चाहते हैं जो भी किया जा सकता है! आपको बस थोड़ी जावास्क्रिप्ट (इस उदाहरण में jQuery) का उपयोग करने की आवश्यकता है:

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

फिर अपनी सीएसएस में आप उन वर्ग चयनकर्ताओं का उपयोग करते हैं जो आपको पसंद आते हैं:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }

Comments

IE7 / 8 टिप के लिए धन्यवाद। बहुत अच्छा काम करता है।

— ब्रेंडन क्रॉफर्ड

आप मेरे जवाब में CSS3 चयनकर्ताओं या आप में CSS2 चयनकर्ताओं को ले जा सकते हैं और उन्हें सीधे jQuery में छोड़ सकते हैं और वे IE6 में स्वाभाविक रूप से काम करेंगे। कक्षाओं को जोड़ने के लिए इन सभी अतिरिक्त हुप्स के माध्यम से कूदने की आवश्यकता नहीं है।

— BoltClock