सीएसएस के साथ दूसरा अंतिम तत्व चुनें

Question

मुझे पहले से ही पता है: आखिरी बच्चा। लेकिन क्या div का चयन करने का एक तरीका है:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

नोट: jQuery के बिना, केवल सीएसएस के साथ

Comments

निश्चित रूप से कुछ तर्क हैं कि दूसरा-अंतिम बच्चा महत्वपूर्ण क्यों है?

— डेविड तांग

हाँ, मुझे कुछ शैलियों को लागू करने के लिए अंतिम और दूसरे-अंतिम दोनों का चयन करने की आवश्यकता है

— गतिशील

तुम सिर्फ 2

— डिवेट

"आप सिर्फ 2 लास्ट डिव पर एक क्लास क्यों नहीं लगा सकते हैं": शायद अगर आपको शैली की सामग्री मिलती है जो उत्पन्न हो रही है, जिसमें आपको दूसरे अंतिम आइटम में क्लास जोड़ने के लिए (आसान) एक्सेस नहीं है?

— हेनरिक

Answer 1

CSS3 में आपके पास:

:nth-last-child(2)

देखें: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-dild

nth-last-child Browser समर्थन:

• क्रोम 2
• फ़ायरफ़ॉक्स 3.5
• ओपेरा 9.5, 10
• सफारी 3.1, 4
• इंटरनेट एक्सप्लोरर 9

Comments

यह संभवतः जाने का तरीका है जब तक आप उस वर्ग को संलग्न नहीं कर सकते हैं जिसे आप चुनने की कोशिश कर रहे हैं। जैसा कि फ्रॉस्टी ने उल्लेख किया है, CSS3 पुराने ब्राउज़र या IE द्वारा समर्थित नहीं है। यदि आप क्रॉस-ब्राउज़र कम्प्यूटेबिलिटी के बारे में चिंतित हैं, तो Jquery एक बेहतर विकल्प है।

— थॉमस

यह लिंक किए गए लेख से कॉपी / पेस्ट था ... संपादित उत्तर, धन्यवाद।

— फ्रॉस्टी जेड

css में समाधान: #container>: nth-last-child (2) {बैकग्राउंड: रेड;} कृपया इस कोडपेन को लाइव में देखने के लिए देखें: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

अब जब हमें पुराने IE का समर्थन करने की आवश्यकता नहीं है, तो यह उत्तर पूरी तरह से काम करेगा। ईमानदारी से, अगर लोग अभी भी IE 8 और नीचे का उपयोग कर रहे हैं, तो वे सुंदर चीजों के लायक नहीं हैं।

— स्टेंडर

Answer 2

नोट: इस उत्तर को पोस्ट किया गया क्योंकि ओपी ने बाद में टिप्पणियों में कहा था कि उन्हें पिछले दो तत्वों का चयन करने की आवश्यकता है , न कि केवल एक ही।

---

:nth-childCSS3 चयनकर्ता वास्तव में अधिक सक्षम से आप कभी कल्पना की है!

उदाहरण के लिए, यह अंतिम 2 तत्वों का चयन करेगा #container:

#container :nth-last-child(-n+2) {}

लेकिन यह सिर्फ एक खूबसूरत दोस्ती की शुरुआत है।

• :nth-child ब्राउज़र का समर्थन

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Comments

एक अच्छा, मेरा जवाब केवल अंतिम बच्चे का चयन करता है 1. इस बारे में नहीं पता था। + 'd

— rsplak