सीएसएस अंतिम बच्चा (-1)

Question

मुझे एक सीएसएस चयनकर्ता की तलाश है जो मुझे सूची के पूर्व-अंतिम बच्चे का चयन करने देता है।

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

स्थैतिक विधि:

ul li:nth-child(5)

गतिशील विधि:

ul li:last-child(-1)

कौन से कोर्स को मान्य नहीं करता है, nth-last-child को भी एक गतिशील तरीका प्रदान नहीं होता है .. मैं जावास्क्रिप्ट में वापस आ सकता हूं लेकिन अगर कोई सीएसएस तरीका है जिसे मैं अनदेखा कर रहा हूं तो मुझे आश्चर्य हो रहा है

Comments

इसे आमतौर पर "दूसरा अंतिम" कहा जाता है। इसके लिए एक और फैंसी शब्द भी है: "पेनॉल्टल"।

— BoltClock

@BoltClock मुझे "पेनोल्टीमेट" शब्द बहुत पसंद है। मैं इसे अब एक स्नार्कली फेसबुक अपडेट में इस्तेमाल करने जा रहा हूं।

— एंड्रयू नाई

Css के साथ सेलेक्ट सेकंड लास्ट एलिमेंट

— कास्त्रो रॉय

सभी का उल्लेख करने के लिए penultimate - यह "सीएसएस penultimate" के लिए Google पर # 1 दिखाया।

— चकेड़ा

Answer 1

आप उपयोग कर सकते हैं :nth-last-child(); वास्तव में, इसके अलावा :nth-last-of-type()मुझे नहीं पता कि आप और क्या उपयोग कर सकते हैं। मुझे यकीन नहीं है कि आप "गतिशील" से क्या मतलब है, लेकिन अगर आप का मतलब यह है कि क्या शैली नए दूसरे अंतिम बच्चे पर लागू होती है जब सूची में अधिक बच्चे जोड़े जाते हैं, हाँ यह होगा। इंटरएक्टिव फिडल।

ul li:nth-last-child(2)

Comments

ठीक है कि काम करता है! कोड व्याख्याकार (jsfiddle) ने इसे मान्य नहीं किया था। उनकी तरफ से एक बग का अनुमान लगाएं! धन्यवाद

— १२:४६ बजे हेडेड वैन डेर हीड

@ डेविड एलन: मुझे नहीं लगता कि वह परवाह करता है अगर वह पहले से ही उपयोग करने की कोशिश कर रहा है :nth-child(5)और :last-child। इस तरह की टिप्पणियों को या तो सवाल पर जाना चाहिए या खुद को रखना चाहिए।

— BoltClock

हो सकता है कि वह बिना किसी समर्थन के मुद्दे के बारे में जानता हो। मैं इसे उजागर कर रहा हूं .... मैंने jQuery का उपयोग करके एक उत्तर दिया और मुझे खुशी होगी कि यह जावास्क्रिप्ट अक्षम उपयोगकर्ताओं के साथ काम नहीं करेगा। लेकिन अधिक लोग IE7 / 8 का उपयोग जेएस को अक्षम करने की तुलना में करते हैं

— डेविड एलन

@ डेविड, मेरा मानना ​​है कि

— Selectivrz

@ArgsKwargs ग्रेट कमेंट ने कभी सिलेक्टिव का नहीं सुना। आपको बता दें कि अगर यह nth-last-child

— David Allen

Answer 2

जब तक आप PHP को उस वर्ग को लेबल करने के लिए प्राप्त नहीं कर सकते हैं जब तक कि आप jQuery का उपयोग करने के लिए बेहतर नहीं हैं।

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});

Comments

यह सर्वथा कष्टप्रद है कि jQuery :nth-last-child()सिर्फ इसलिए लागू नहीं होता क्योंकि जॉन को लगता है कि कोई भी इसका उपयोग नहीं करता है ।

— BoltClock

मैं नहीं बल्कि अजगर के साथ लेबल ;-) ontopic: अच्छी तरह से सीएसएस इस तरह से ठीक लगता है, शायद jsfiddle भी सोचता है कि कोई भी इसका इस्तेमाल नहीं करता है :-)

— Hedde van der Heide

@ArgsKwargs: अजीब बात है कि यह jsFiddle में काम क्यों नहीं करेगा। यह व्याख्या करने के लिए ब्राउज़र पर निर्भर है; इसका अपना सीएसएस इंजन नहीं है।

— BoltClock

@BoltClock मुझे गलत नहीं लगता है यह काम करता है, कोड हेल्पर (रंग विज़ुअलाइज़ेशन) सिर्फ कुछ स्पष्ट नहीं होने का संकेत देता है (इसलिए मैंने कोशिश भी नहीं की)

— Hedde van der Heide

मुझे नहीं लगता है कि कोई भी कोड अप्राप्त है। लेकिन मुझे पता है कि "रंग दृश्य" के बारे में आपका क्या मतलब है

— डेविड एलेन