: nth-last-child - सीएसएस-ट्रिक्स

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

मान लें कि हमारे पास एक अज्ञात संख्या के साथ एक सूची है, और हम दूसरे से अंतिम आइटम (इस सटीक उदाहरण में, "चौथे आइटम") को उजागर करना चाहते हैं:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

सूची मद में एक वर्ग को जोड़ने जैसा कुछ करने के बजाय (जैसे .highlight) हम उपयोग कर सकते हैं :nth-last-child:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )

जैसा कि आप देख सकते हैं, :nth-last-childएक तर्क लेता है: यह एक एकल पूर्णांक, कीवर्ड "सम" या "विषम" या एक सूत्र हो सकता है। यदि एक पूर्णांक निर्दिष्ट किया जाता है, तो केवल एक तत्व चुना जाता है - लेकिन कीवर्ड या सूत्र मूल तत्व के सभी बच्चों के माध्यम से पुनरावृत्ति करेगा और जावास्क्रिप्ट में एक सरणी में आइटम नेविगेट करने के समान तत्वों का चयन करेगा। कीवर्ड "सम" और "विषम" सीधे (2, 4, 6 आदि) या क्रमशः 1, 3, 5 हैं। सूत्र को सिंटैक्स का उपयोग करके बनाया गया है an+b, जहां:

• "ए" एक पूर्णांक मूल्य है
• "एन" शाब्दिक पत्र "एन" है
• "+" एक ऑपरेटर है और "+" या "-" हो सकता है
• "बी" एक पूर्णांक है और यदि कोई ऑपरेटर सूत्र में शामिल है, तो इसकी आवश्यकता होती है

यह ध्यान रखना महत्वपूर्ण है कि यह सूत्र एक समीकरण है, और प्रत्येक सिबलिंग तत्व के माध्यम से पुनरावृत्ति करता है, यह निर्धारित करता है कि किसे चुना जाएगा। सूत्र का "एन" हिस्सा, यदि शामिल है, तो बढ़ते धनात्मक पूर्णांकों के एक सेट का प्रतिनिधित्व करता है (ठीक उसी तरह जैसे कि एक सरणी के माध्यम से पुनरावृत्ति)। हमारे उपरोक्त उदाहरण में, हमने हर दूसरे तत्व को सूत्र के साथ चुना 2n, जो काम किया क्योंकि हर बार एक तत्व की जांच की गई, "एन" एक (2 × 0, 2 × 1, 2 × 2, 2 × 3, आदि) की वृद्धि हुई। यदि किसी तत्व का क्रम समीकरण के परिणाम से मेल खाता है, तो वह चयनित (2, 4, 6, आदि) हो जाता है। इसमें शामिल गणित की अधिक गहन व्याख्या के लिए, कृपया इस लेख को पढ़ें।

आगे वर्णन करने के लिए, यहाँ कुछ मान्य :nth-last-of-typeचयनकर्ताओं के उदाहरण दिए गए हैं :

इस पेन को देखें!

सौभाग्य से, आपको हमेशा गणित स्वयं नहीं करना पड़ता है-वहाँ कई :nth-last-childपरीक्षक और जनरेटर होते हैं:

• सीएसएस-ट्रिक्स परीक्षक
• वेरो का टेस्टर

ब्याज के अंक

• :nth-last-childस्रोत आदेश के नीचे से शुरू होने वाले तत्वों के माध्यम से पुनरावृति। इसके बीच एकमात्र अंतर है और यह :nth-childहै कि उत्तरार्द्ध स्रोत के शीर्ष से शुरू होने वाले तत्वों के माध्यम से पुनरावृत्त करता है।
• :nth-last-childचयनकर्ता बहुत के समान है :nth-last-of-type, लेकिन एक साथ महत्वपूर्ण अंतर: यह कम विशिष्ट है। ऊपर हमारे उदाहरण में, वे एक ही परिणाम का उत्पादन करेंगे क्योंकि हम केवल liतत्वों पर पुनरावृत्ति कर रहे हैं , लेकिन अगर हम भाई-बहनों के एक अधिक जटिल समूह पर पुनरावृत्ति कर रहे हैं, :nth-last-childतो सभी भाई-बहनों को एक ही तत्व प्रकार के भाई-बहन से मिलाने की कोशिश करेंगे। इससे पता चलता है कि :nth-last-childयह एक व्यवस्था में किसी भी सिबलिंग तत्व का चयन कर सकता है, न कि उन तत्वों को जो कोलन से पहले निर्दिष्ट किए गए हैं।

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	३.२+	काम करता है	9.5+	9+	काम करता है	काम करता है

:nth-last-childCSS चयनकर्ता मॉड्यूल 3 में पेश किया गया था, जिसका अर्थ है कि पुराने संस्करण के ब्राउज़र इसका समर्थन नहीं करते हैं। हालांकि, आधुनिक ब्राउज़र समर्थन त्रुटिहीन है, और नए छद्म चयनकर्ता व्यापक रूप से उत्पादन वातावरण में उपयोग किए जाते हैं। यदि आपको IE के लिए पुराने ब्राउज़र समर्थन की आवश्यकता है, या तो IE के लिए पॉलीफ़िल, या गैर-महत्वपूर्ण तरीकों से इन चयनकर्ताओं का उपयोग करें, जो कि प्रगतिशील वृद्धि है।