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

:nth-childचयनकर्ता एक सूत्र के अनुसार, आप अपने स्रोत आदेश के आधार पर एक या अधिक तत्वों का चयन करने के लिए अनुमति देता है।

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

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

मान लीजिए हम एक सीएसएस ग्रिड का निर्माण कर रहे हैं, और हर चौथे ग्रिड मॉड्यूल पर मार्जिन को हटाना चाहते हैं। यहाँ है कि HTML:

 One Two Three Four Five 

हर चौथे आइटम (जैसे .last) में एक क्लास जोड़ने के बजाय , हम उपयोग कर सकते हैं :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

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

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

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

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

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

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

: nth-child (a + b)

:nth-childसीएसएस चयनकर्ताओं विनिर्देश के अनुसार जोड़ा जा सकता है कि एक छोटे से ज्ञात फिल्टर है : प्रारूप :nth-childका उपयोग करते हुए तत्वों के सबसेट का चयन करने की क्षमता of । मान लें कि आपके पास मिश्रित सामग्री की एक सूची है: कुछ के पास वर्ग है .video, कुछ के पास कक्षा है .picture, और आप पहले 3 चित्रों का चयन करना चाहते हैं। आप ऐसा "फ़िल्टर" के साथ कर सकते हैं:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

ध्यान दें कि यह चयनकर्ता को सीधे चयनकर्ता से जोड़ने से अलग है :nth-child:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

यह थोड़ा भ्रमित कर सकता है, इसलिए एक उदाहरण अंतर को समझने में मदद कर सकता है:

"फ़िल्टर" के लिए ब्राउज़र समर्थन बहुत सीमित है: इस लेखन के रूप में, केवल सफारी ने सिंटैक्स का समर्थन किया। अपने पसंदीदा ब्राउज़र की स्थिति की जाँच करने के लिए, यहाँ से संबंधित खुले मुद्दे हैं :nth-child(an+b of s):

• फ़ायरफ़ॉक्स: एनटीएच-बच्चे के लिए समर्थन (सेल का ए + बी)
• Chrome: लागू: nth-child (S का + b)

ब्याज के अंक

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

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

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

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