सीएसएस को समझना :nth-child() चयनकर्ता

सभी सीएसएस चयनकर्ताओं की तरह, आप वेबपेज में तत्वों की पहचान करने और उन पर शैलियाँ लागू करने के लिए :nth-child() का उपयोग कर सकते हैं। लेकिन यह चयनकर्ता आपको भाई-बहनों के समूह को उनकी सापेक्ष स्थिति के आधार पर सीमित करने देता है।

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

:nth-child() चयनकर्ता सिंटैक्स

के तौर पर सीएसएस छद्म-वर्ग चयनकर्ता, :nth-child() सिंटैक्स अन्य चयनकर्ताओं से भिन्न है। यह भाई-बहनों के समूह में तत्वों के मिलान के लिए एक तर्क को एक पैटर्न के रूप में लेता है:

:nth-child(args) {
/*...*/
}

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

सामान्य मामलों के लिए कीवर्ड मानों का उपयोग करना

यह चयनकर्ता दो कीवर्ड मानों को समायोजित कर सकता है:

विषम और यहां तक ​​की. वे विशेष रूप से उपयोगी हैं किसी तालिका में वैकल्पिक पंक्तियों को स्टाइल करना.

एक सरल क्रमबद्ध सूची इस बात का एक और अच्छा उदाहरण है कि आप इन कीवर्ड मानों का उपयोग कब कर सकते हैं:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

का उपयोग :nवां बच्चा (विषम) चयनकर्ता, आप प्रत्येक वैकल्पिक आइटम का रंग बदल सकते हैं:

:nth-child(odd) {
color: red;
}

आइटम इंडेक्स 1 से शुरू होते हैं, इसलिए पहला आइटम लाल दिखाई देगा, फिर तीसरा, और इसी तरह:

अधिक लचीलेपन के लिए कार्यात्मक संकेतन

आप किसी व्यक्तिगत तत्व का चयन करने के लिए एकल पूर्णांक का उपयोग इस प्रकार कर सकते हैं:

li:nth-child(4) {
color: red;
}

इस मामले में, चयनकर्ता सूची में केवल चौथे आइटम से मेल खाता है:

यह सिंटैक्स अधिक सामान्य कार्यात्मक सिंटैक्स का एक विशेष मामला है जो किसी दिए गए पैटर्न से मेल खाने वाली वस्तुओं का चयन करता है। यह वाक्यविन्यास है:

:nth-child(An+B) {
/*...*/
}

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

उदाहरण के लिए, तर्क 3n+1 लें:

li:nth-child(3n+1) {
color: red;
}

यह पहले आइटम पर चयन शुरू करेगा और उसके बाद हर तीसरे आइटम के साथ जारी रहेगा:

इसकी तुलना अभिव्यक्ति 3n+2 से करें:

li:nth-child(3n+2) {
color:red;
}

यह अभी भी हर तीसरे आइटम का चयन करता है, लेकिन अब यह सूची में दूसरे आइटम से शुरू होता है:

एक और दिलचस्प उदाहरण है :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

यह तीसरे (+3) से शुरू होकर प्रत्येक आइटम (एन) का चयन करेगा। यह इस तरह दिखेगा:

कुछ परिणाम प्राप्त करने के लिए आप घटाव का भी उपयोग कर सकते हैं:

li:nth-child(3n-1) {
color: red;
}

यह उदाहरण अभी भी हर तीसरे आइटम का चयन करता है, लेकिन यह "माइनस फर्स्ट" से शुरू होता है। असल में, इसका मतलब यह है कि यह सूची में दूसरे आइटम का चयन करेगा, फिर पांचवें, और इसी तरह:

के लिए वाक्य - विन्यास

आप कीवर्ड का भी उपयोग कर सकते हैं का इसके बाद ए चयनकर्ता :nth-child() चयनकर्ता में एक तर्क के रूप में। यह सिंटैक्स आपको उन संभावित आइटमों को सीमित करने देता है जिन्हें नियमित पैटर्न चुनता है।

उदाहरण के लिए, कल्पना करें कि आपका मार्कअप मूल से अधिक जटिल है:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

अब, किसी विशिष्ट वर्ग वाले सेट से सम आइटम का चयन करने के लिए :nth-child का उपयोग करें:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

ध्यान दें कि कैसे केवल सम-संख्या वाले बोल्ड आइटम ही लाल होते हैं:

यह भी विचार करें कि यह किस प्रकार भिन्न है li.new: nth-child (सम) जो नए तत्वों को लक्षित करता है, लेकिन केवल तभी जब वे सम हों। उपरोक्त उदाहरण में यह आइटम 2 और 6 होंगे।

:nth-child() चयनकर्ता के साथ कार्य करना

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