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

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

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

First Item
Second Item
Third Item
Fourth Item
Fifth Item

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

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

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

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

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

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

पेन सीएसएस-ट्रिक्स देखें: CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा nth-last-of-type।

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

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

ब्याज के अंक

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

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

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

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