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

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

मान लीजिए कि हमारे पास एक अनऑर्डर की गई सूची है और "ज़ेबरा-स्ट्राइप" को वैकल्पिक सूची आइटम की इच्छा है:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

बल्कि प्रत्येक सूची आइटम के लिए कक्षाएं जोड़ने से (उदाहरण के लिए .evenऔर .odd) हम उपयोग कर सकते हैं :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

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

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

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

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

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

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

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

ब्याज के अंक

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

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

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

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