सम और विषम सूची तत्वों को स्टाइल करना: छद्म-वर्ग बनाम nth-child

सीएसएस छद्म-वर्गों का उपयोग करके सूची आइटम के लिए वैकल्पिक रंग प्राप्त करने का प्रयास करते समय, आप शायद मुद्दों का सामना करें. हालांकि इस उद्देश्य के लिए li:odd और li:even का उपयोग करना तर्कसंगत लग सकता है, व्यवहार अप्रत्याशित हो सकता है।

सूची आइटमों के सम और विषम उदाहरणों को प्रभावी ढंग से स्टाइल करने के लिए, निम्नलिखित दृष्टिकोण का उपयोग करने पर विचार करें:

इसके बजाय:

li { color: blue }
li:odd { color:green }
li:even { color:red }

उपयोग:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

:odd और :even को :nth-child(odd) और :nth-child(even) से बदलने पर, वांछित वैकल्पिक रंग प्रभाव प्राप्त होता है। ऐसा इसलिए है क्योंकि :nth-child आपको सूची में उनकी स्थिति के आधार पर तत्वों का चयन करने की अनुमति देता है, यह सुनिश्चित करते हुए कि प्रत्येक आइटम पर सही स्टाइल लागू किया गया है।