CSS Nth चाइल्ड:द कम्प्लीट गाइड

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

जब आप कोई वेबसाइट डिज़ाइन कर रहे हों, तो हो सकता है कि आप किसी कंटेनर में केवल कुछ चुनिंदा तत्वों के लिए एक शैली लागू करना चाहें। उदाहरण के लिए, हो सकता है कि आप किसी सूची के प्रत्येक दूसरे तत्व या तालिका की प्रत्येक तीसरी पंक्ति में केवल एक शैली लागू करना चाहें।

यहीं पर CSS :nth-child छद्म वर्ग आता है। :nth-child छद्म वर्ग HTML पृष्ठ पर आइटम की सूची में उनकी स्थिति के आधार पर तत्वों से मेल खाता है।

यह ट्यूटोरियल उदाहरणों के संदर्भ में, छद्म वर्गों की मूल बातें और आप :nth-child छद्म वर्ग का उपयोग कैसे कर सकते हैं, इस पर चर्चा करेंगे। इस ट्यूटोरियल को पढ़ने के अंत तक, आप वेब पेज पर तत्वों का चयन करने के लिए :nth-child छद्म-वर्ग का उपयोग करने में विशेषज्ञ होंगे।

सीएसएस छद्म-वर्ग

CSS में, चयनकर्ताओं का उपयोग वेब पेज पर विशिष्ट तत्वों का चयन करने के लिए किया जाता है, जिस पर एक शैली लागू की जानी चाहिए। उदाहरण के लिए, एक चयनकर्ता वेब पेज पर सभी

तत्वों के टेक्स्ट रंग को हरे रंग में बदल सकता है।

आप यह तय कर सकते हैं कि आप केवल उस तत्व पर एक शैली लागू करना चाहते हैं जो एक विशिष्ट स्थिति में मौजूद है। छद्म-वर्ग आपको केवल तभी शैलियों को लागू करने की अनुमति देते हैं जब कोई तत्व किसी विशिष्ट स्थिति में होता है।

CSS :nth-child Pseudo-Class

:nth-child छद्म वर्ग समूह में तत्वों पर शैलियों को लागू करता है। आप किसी विशिष्ट तत्व की स्थिति या एकाधिक तत्वों के आधार पर शैलियों को लागू कर सकते हैं। एक सामान्य :nth-child नियम सूची में प्रत्येक तत्व को विषम या सम स्थिति में रंगना है।

यहां :nth-child छद्म वर्ग का सिंटैक्स दिया गया है:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

li:nth-child(2) {रंग:हल्का नीला;}

आइए इस उदाहरण को तोड़ें:

ली उस तत्व को संदर्भित करता है जिस पर शैली लागू की जानी चाहिए।
नौवां बच्चा एक तत्व से मेल खाने के लिए उपयोग किया जाने वाला चयनकर्ता है।
2 nth-child का उपयोग करके किसी तत्व का मिलान करने के लिए उपयोग किया जाने वाला सूत्र है।

इस मामले में, हमने सूची में हर दूसरे

तत्व पर अपनी शैली लागू की।

:nth-child स्वीकृत मान

:nth-child छद्म वर्ग दो प्रकार के मूल्यों को स्वीकार करता है। सबसे पहले, छद्म वर्ग उन कीवर्ड मानों को स्वीकार करता है जिन्हें डिफ़ॉल्ट सूत्र दिए गए हैं। ये कीवर्ड हैं:

विषम:उन तत्वों का चयन करता है जिनकी सूची में स्थिति विषम संख्या है।
सम:उन तत्वों का चयन करता है जिनकी सूची में स्थिति एक सम संख्या है।

दूसरा, :nth-child छद्म वर्ग एक कस्टम सूत्र स्वीकार करता है जो उन तत्वों को निर्दिष्ट करता है जिन्हें छद्म वर्ग को वेब पेज पर चुनना चाहिए। यहां कुछ उदाहरण सूत्र दिए गए हैं:

:nth-child(6):सूची में छठे तत्व का चयन करता है।
:nth-child(n+2):दूसरे तत्व और बाद के सभी तत्वों का चयन करता है।
:nth-child(4n):उन सभी तत्वों का चयन करता है जो 4 के गुणज हैं।

n उस स्थिति के बराबर है जिसमें कोई आइटम सूची में दिखाई देता है।

अब हम :nth-child छद्म वर्ग की मूल बातें जानते हैं, हम क्रिया में छद्म वर्ग के कुछ उदाहरणों का पता लगा सकते हैं।

CSS :nth-child उदाहरण

आइए :nth-child छद्म वर्ग के दो उदाहरणों के माध्यम से चलते हैं।

:वें-चाइल्ड टेबल

:nth-child छद्म वर्ग का एक सामान्य उपयोग तालिका में पंक्तियों का चयन करना है।

मान लीजिए हम एक स्थानीय कुकरी क्लब के लिए एक वेबसाइट डिजाइन कर रहे हैं। क्लब ने हमें उनकी वेबसाइट के लिए उनकी विशेष मसालेदार हॉट चॉकलेट की रेसिपी के साथ एक टेबल बनाने के लिए कहा है। . क्लब चाहता है कि तालिका की हर दूसरी पंक्ति को गर्म गुलाबी रंग में हाइलाइट किया जाए, जो कि क्लब का मुख्य रंग है।

हम निम्नलिखित कोड का उपयोग करके यह तालिका बना सकते हैं:

घटक	मात्रा
स्किम्ड मिल्क	250 mls
75% डार्क चॉकलेट	दो वर्ग (10g)
दालचीनी	एक चुटकी
शहद	1 चम्मच

<शैली> tr:nth-child(even) {पृष्ठभूमि-रंग:हॉटपिंक; }

CSS Nth चाइल्ड:द कम्प्लीट गाइड हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

हमने दो कॉलम और पांच पंक्तियों वाली एक तालिका को परिभाषित किया (जिनमें से एक शीर्षलेख पंक्ति है)। पहला कॉलम मसालेदार हॉट चॉकलेट बनाने के लिए उपयोग की जाने वाली सामग्री की सूची को संग्रहीत करता है। हमारा दूसरा कॉलम उपयोग किए गए प्रत्येक घटक की मात्रा को संग्रहीत करता है।

HTML में तालिकाएँ कैसे बनाई जाती हैं, इसके बारे में अधिक जानने के लिए, HTML तालिकाओं के लिए हमारी मार्गदर्शिका पढ़ें।

हमारी CSS फ़ाइल में, हमने :nth-child छद्म-वर्ग का उपयोग अपनी तालिका में प्रत्येक सम-संख्या वाली पंक्ति में शैली लागू करने के लिए किया था।

tr चयनकर्ता का उपयोग सभी तालिका पंक्तियों (HTML में टैग द्वारा चिह्नित) का चयन करने के लिए किया जाता है, और :nth-child(even) छद्म वर्ग प्रत्येक तालिका पंक्ति को एक समान आईडी संख्या के साथ चुनता है। प्रत्येक सम-संख्या वाली तालिका पंक्ति के लिए, तालिका पंक्ति का पृष्ठभूमि रंग गर्म गुलाबी पर सेट होता है।

:nth-child List

:nth-child छद्म वर्ग का एक अन्य सामान्य उपयोग किसी सूची में आइटम को हाइलाइट करना है।

मान लीजिए कि हमें कुकिंग क्लब के प्रत्येक सदस्य के नामों की एक सूची बनाने के लिए कहा गया है। सूची में पहले तीन नामों का टेक्स्ट हल्के नीले रंग में दिखना चाहिए, क्योंकि वे क्लब में खिताब रखते हैं।

हम निम्नलिखित कोड का उपयोग करके यह सूची बना सकते हैं:

 चाड बेकर्सफ़ील्ड
 लौरा पटेल
 एडी महोनी
 एडना जैमीसन
 लेस्ली स्पेंसर 
 जेम्स मोफ़त
 ओलिविया लिंडसे