वर्ग नामों के साथ विशिष्ट तत्वों को लक्षित करना: एक सीएसएस nth-बाल दृष्टिकोण

चुनौती: उनके आधार पर समान वर्ग नाम वाले चुनिंदा तत्वों को स्टाइल करें स्थिति, मार्कअप में उनके स्थान की परवाह किए बिना।

समाधान: मूल तत्व के भीतर उनकी क्रमिक स्थिति के अनुसार तत्वों को लक्षित करने के लिए nth-child() या nth-of-type() छद्म-चयनकर्ताओं का उपयोग करें।

nth-child() छद्म-चयनकर्ता

nth-child(n) छद्म-चयनकर्ता आपको एक ऐसे तत्व को स्टाइल करने की अनुमति देता है जो उसके माता-पिता का nth बच्चा है। उदाहरण के लिए, वर्ग "myclass" के साथ पहले तत्व को लक्षित करने के लिए:

.parent_class:nth-child(1) {
  color: #000;
}

दूसरे और तीसरे तत्वों को लक्षित करने के लिए, निम्नलिखित चयनकर्ताओं का उपयोग करें:

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

nth-of-type() छद्म-चयनकर्ता

nth-of-type(n) छद्म-चयनकर्ता nth-child() के समान कार्य करता है, लेकिन यह इसके आधार पर तत्वों का चयन करता है उनके माता-पिता के भीतर उनका प्रकार। यह तब उपयोगी होता है जब आपके पास पैरेंट के भीतर एक ही प्रकार के कई तत्व हों:

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

उदाहरण HTML:

  
my text1
  

  
my text2
  

  
my text3