क्या nth-child के साथ अंतिम n आइटम का चयन करना संभव है?

Question

मानक सूची का उपयोग करते हुए, मैं अंतिम 2 सूची आइटमों का चयन करने का प्रयास कर रहा हूं। मैंने विभिन्न क्रमपरिवर्तन किए हैं, An+Bलेकिन अंतिम 2 का चयन करने के लिए कुछ भी नहीं लगता है:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

मुझे एक नए CSS3 चयनकर्ताओं के बारे में पता है, :nth-last-child()लेकिन अगर संभव हो तो कुछ और ब्राउज़रों में काम करने वाली चीज़ पसंद करता हूं (विशेष रूप से IE के बारे में परवाह नहीं)।

Comments

IE के बावजूद, ब्राउज़र का समर्थन quirksmode.org के अनुसार:nth-last-child() ही है । इसके अलावा, और दोनों CSS3 में पेश किए गए थे, न तो उस अर्थ में पुराने या नए हैं। :nth-child() :nth-child():nth-last-child()

— BoltClock

बहुत सी उपयोगी nth-childट्रिक्स को

— css-

Answer 1

यह सूची के अंतिम दो iems का चयन करेगा:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

Comments

हां, लेकिन आप :nth-last-child()उसका उपयोग कर रहे हैं जिसका उल्लेख पहले ही किया जा चुका है।

— BoltClock

(-n + 2) => यह वही है जिसकी मुझे तलाश है। धन्यवाद

— Surjith एसएम

यह स्वीकृत उत्तर होना चाहिए, हां, nth-last-child पहले ही उल्लेख किया गया था, लेकिन वास्तव में कैसे (-n + b) एक शांत चाल नहीं है

— BlackTigerX

Answer 2

nth-last-childऐसा लगता है कि यह विशेष रूप से इस समस्या को हल करने के लिए डिज़ाइन किया गया था, इसलिए मुझे संदेह है कि क्या अधिक संगत विकल्प है। समर्थन हालांकि, बहुत सभ्य लग रहा है ।

Comments

लिंक के लिए धन्यवाद - ऐसा लगता है कि nth-child support वास्तव में nth-last-child के समान है (मुझे यकीन था कि IE8 ने nth-child का समर्थन किया था लेकिन शायद नहीं)।

— असंतुष्टगीत

Answer 3

:nth-last-child(-n+2) चाल चलनी चाहिए

Answer 4

के शब्दार्थ की परिभाषा के कारण nth-child, मैं यह नहीं देखता कि इसमें शामिल तत्वों की सूची की लंबाई को शामिल किए बिना यह कैसे संभव है। शब्दार्थ का उद्देश्य दोहराए जाने वाले समूहों ( संपादित करें - बोल्टकॉक) या कुछ निश्चित लंबाई के पहले भाग में "बाकी" के बाद बाल तत्वों के एक समूह को अलग करने की अनुमति देना है । आप इसके विपरीत चाहते हैं, जो nth-last-childआपको देता है।

Comments

साथ :nth-child()आप पहली बार चुन सकते हैं mनिर्दिष्ट करके तत्वों :nth-child(-n+m)।

— BoltClock

@BoltClock मैं एक सेकंड के लिए उस पर सोचने जा रहा हूँ ... ओह, ठीक है हाँ तुम उस बारे में सही हो। स्पष्ट रूप से मैं इस बात पर ज्यादा गंभीर नहीं हूं कि सीएसएस 3 चयनकर्ताओं का आविष्कार करते समय समिति की मंशा क्या थी, इस पर एक गंभीर घोषणा करने की आवश्यकता है :-)

— पॉइंटी

Answer 5

यदि आप अपने प्रोजेक्ट में jQuery का उपयोग कर रहे हैं, या इसे शामिल करने के लिए तैयार हैं, तो आप nth-last-childइसके चयनकर्ता एपीआई के माध्यम से कॉल कर सकते हैं (यह इस नकली है जो ब्राउज़र को पार कर जाएगा)। यहाँ एक nth-last-childप्लगइन का लिंक दिया गया है । यदि आप उन तत्वों को लक्षित करने का तरीका अपनाते हैं जिनमें आपकी रुचि थी:

$('ul li:nth-last-child(1)').addClass('last');

और फिर फिर से या छद्म चयनकर्ताओं के lastबजाय कक्षा को स्टाइल करें , आपके पास बहुत अधिक सुसंगत क्रॉस ब्राउज़र अनुभव होगा।nth-childnth-last-child