CSS nth-child: पूर्ण गाइड

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

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

यहीं CSS :nth-child स्यूडो-क्लास काम आता है। :nth-child स्यूडो-क्लास एक HTML पेज पर आइटम्स की सूची में उनकी स्थिति के आधार पर एलिमेंट्स से मेल खाता है।

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

CSS स्यूडो-क्लासेज

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

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

CSS :nth-child स्यूडो-क्लास

:nth-child स्यूडो-क्लास एक ग्रुप में एलिमेंट्स पर स्टाइल लागू करता है। आप किसी एलिमेंट पर उसकी स्थिति के आधार पर या कई एलिमेंट्स पर स्टाइल लागू कर सकते हैं। एक सामान्य :nth-child नियम लिस्ट में विषम या सम स्थिति पर हर एलिमेंट को कलर करना है।

:nth-child स्यूडो-क्लास का सिंटैक्स यहां है:

li:nth-child(2) { color: lightblue; }

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

• li उस एलिमेंट को संदर्भित करता है जिस पर स्टाइल लागू किया जाना चाहिए।
• nth-child वह सेलेक्टर है जिसका उपयोग एलिमेंट से मेल खाने के लिए किया जाता है।
• 2 nth-child का उपयोग करके एलिमेंट से मेल खाने के लिए उपयोग किया जाने वाला फॉर्मूला है।

इस मामले में, हमने अपनी स्टाइल को एक लिस्ट में हर दूसरे <li> एलिमेंट पर लागू किया।

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

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

• odd: लिस्ट में जिन एलिमेंट्स की स्थिति एक विषम संख्या है उन्हें सेलेक्ट करता है।
• even: लिस्ट में जिन एलिमेंट्स की स्थिति एक सम संख्या है उन्हें सेलेक्ट करता है।

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

• :nth-child(6): लिस्ट में छठे एलिमेंट को सेलेक्ट करता है।
• :nth-child(n+2): दूसरा एलिमेंट और सभी बाद के एलिमेंट्स को सेलेक्ट करता है।
• :nth-child(4n): 4 के गुणक वाले सभी एलिमेंट्स को सेलेक्ट करता है।

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

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

CSS :nth-child उदाहरण

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

:nth-child टेबल

:nth-child स्यूडो-क्लास का एक सामान्य उपयोग टेबल में रो को सेलेक्ट करना है।

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

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

<html> <table> <tr> <th>Ingredient</th> <th>Quantity</th> </tr> <tr> <td>Skimmed Milk</td> <td>250 mls</td> </tr> <tr> <td>75% Dark Chocolate</td> <td>Two squares (10g)</td> </tr> <tr> <td>Cinnamon</td> <td>A pinch</td> </tr> <tr> <td>Honey</td> <td>1 tsp</td> </tr> </table> <style> tr:nth-child(even) { background-color: hotpink; } </style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

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

HTML में टेबल कैसे बनाए जाते हैं, इसके बारे में अधिक जानने के लिए, HTML टेबल्स पर हमारे गाइड को पढ़ें।

हमारी CSS फाइल में, हमने :nth-child स्यूडो-क्लास का उपयोग करके हमारी टेबल में हर सम-नंबर वाली रो पर स्टाइल लागू किया।

tr सेलेक्टर का उपयोग सभी टेबल रो (HTML में <tr> टैग द्वारा दर्शाए गए) को सेलेक्ट करने के लिए किया जाता है, और :nth-child(even) स्यूडो-क्लास एक सम ID नंबर वाली हर टेबल रो को सेलेक्ट करता है। प्रत्येक सम-नंबर वाली टेबल रो के लिए, टेबल रो का बैकग्राउंड कलर हॉट पिंक पर सेट किया जाता है।

:nth-child लिस्ट

:nth-child स्यूडो-क्लास का एक और सामान्य उपयोग लिस्ट में आइटम्स को हाइलाइट करना है।

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

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

<html> <ul> <li>Chad Bakersfield</li> <li>Laura Patel</li> <li>Eddie Mahoney</li> <li>Edna Jamieson</li> <li>Lesley Spencer</li> <li>James Moffat</li> <li>Olivia Lindsay</li> <ul> <style> li:nth-child(-n+3) { color: lightblue; } </style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने आइटम्स की अनऑर्डर्ड लिस्ट को परिभाषित करने के लिए <ul> टैग का उपयोग किया। फिर, हमने लिस्ट में सात नाम जोड़ने के लिए <li> टैग्स का उपयोग किया, प्रत्येक <li> टैग में एक नाम है।

हमारे CSS कोड में, हमने अपनी लिस्ट में पहले तीन <li> टैग्स को सेलेक्ट करने के लिए :nth-child सेलेक्टर का उपयोग किया। विशेष रूप से, हमने फॉर्मूला -n+3 का उपयोग किया, जो हमें पहले तीन नामों को सेलेक्ट करने की अनुमति देता है। फिर, चयनित <li> एलिमेंट्स के टेक्स्ट का कलर लाइट ब्लू में बदल दिया गया।

यदि आप लिस्ट्स के बारे में अधिक जानना चाहते हैं, तो हमारे HTML लिस्ट्स गाइड को देखें।

निष्कर्ष

:nth-child सेलेक्टर आपको एक ग्रुप में उनकी स्थिति के आधार पर एलिमेंट्स को सेलेक्ट करने की अनुमति देता है जिन पर आप CSS स्टाइल लागू कर सकते हैं।

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

क्या आप CSS के बारे में अधिक जानने में रुचि रखते हैं? हमारे CSS सीखने के गाइड को देखें। आपको इस गाइड में शीर्ष CSS शिक्षण संसाधनों और कोर्सेज पर एक्सपर्ट टिप्स और मार्गदर्शन मिलेगा।