तालिकाओं को पढ़ने में आसान बनाने के लिए, वैकल्पिक पृष्ठभूमि रंगों के साथ पंक्तियों को स्टाइल करना अक्सर सहायक होता है। टेबल को स्टाइल करने के सबसे सामान्य तरीकों में से एक है हर दूसरी पंक्ति का बैकग्राउंड कलर सेट करना। इसे अक्सर "ज़ेबरा धारियों" के रूप में जाना जाता है।
आप इसे हर दूसरी पंक्ति को एक सीएसएस वर्ग के साथ सेट करके और फिर उस वर्ग के लिए शैली को परिभाषित करके पूरा कर सकते हैं। यह काम करता है लेकिन इसके बारे में जाने का सबसे अच्छा या सबसे कारगर तरीका नहीं है। इस पद्धति का उपयोग करते समय, हर बार आपको उस तालिका को संपादित करने की आवश्यकता होती है, यह सुनिश्चित करने के लिए कि प्रत्येक पंक्ति परिवर्तनों के अनुरूप है, आपको तालिका में प्रत्येक पंक्ति को संपादित करना पड़ सकता है। उदाहरण के लिए, यदि आप अपनी तालिका में एक नई पंक्ति सम्मिलित करते हैं, तो इसके नीचे की हर दूसरी पंक्ति में वर्ग को बदलना होगा।
सीएसएस ज़ेबरा पट्टियों के साथ टेबल को स्टाइल करना आसान बनाता है। आपको कोई अतिरिक्त जोड़ने की आवश्यकता नहीं है एचटीएमएल विशेषताएँ या CSS वर्ग, आप बस इसका उपयोग करते हैं: nth-of-type (n) सीएसएस चयनकर्ता.
The: nth-of-type (n) चयनकर्ता CSS में एक संरचनात्मक छद्म वर्ग है जो आपको माता-पिता और सहोदर तत्वों के साथ उनके संबंधों के आधार पर तत्वों को स्टाइल करने की अनुमति देता है। आप इसका उपयोग उनके स्रोत क्रम के आधार पर एक या अधिक तत्वों का चयन करने के लिए कर सकते हैं। दूसरे शब्दों में, यह हर उस तत्व से मेल खा सकता है जो किसी विशेष प्रकार के माता-पिता का nth चाइल्ड है।
अक्षर n एक कीवर्ड (जैसे विषम या सम), एक संख्या या एक सूत्र हो सकता है।
उदाहरण के लिए, पीले रंग की पृष्ठभूमि वाले हर दूसरे पैराग्राफ टैग को स्टाइल करने के लिए, आपके सीएसएस दस्तावेज़ में शामिल होगा:
p: nth-of-type (विषम) {
पृष्ठभूमि: पीला;
}
अपनी HTML तालिका से प्रारंभ करें
सबसे पहले, अपनी तालिका बनाएं जैसा कि आप सामान्य रूप से HTML में लिखते हैं। पंक्तियों या स्तंभों में कोई विशेष वर्ग न जोड़ें।
अपनी स्टाइलशीट में, निम्नलिखित सीएसएस जोड़ें:
tr: nth-of-type (विषम) {
पृष्ठभूमि-रंग:#सीसीसी;
}
यह पहली पंक्ति से शुरू होने वाले भूरे रंग के रंग के साथ हर दूसरी पंक्ति को स्टाइल करेगा।
स्टाइल वैकल्पिक कॉलम उसी तरह
आप अपनी टेबल में कॉलम के लिए उसी तरह की स्टाइलिंग कर सकते हैं। ऐसा करने के लिए, बस अपने CSS वर्ग में tr को td में बदलें। उदाहरण के लिए:
td: nth-of-type (विषम) {
पृष्ठभूमि-रंग:#सीसीसी;
}
nth-of-type (n) चयनकर्ता में सूत्रों का उपयोग करना
चयनकर्ता में प्रयुक्त सूत्र का सिंटैक्स a+b है।
- a एक संख्या है जो चक्र या सूचकांक आकार का प्रतिनिधित्व करती है।
- n वास्तव में "n" अक्षर है और एक काउंटर का प्रतिनिधित्व करता है, जो 0 पर तारे करता है।
- + एक ऑपरेटर है, जो "-" भी हो सकता है
- बी एक पूर्णांक है और ऑफ़सेट मान का प्रतिनिधित्व करता है - उदाहरण के लिए, चयनकर्ता को कितनी पंक्तियों में पृष्ठभूमि रंग लागू करना शुरू करना चाहिए। यह आवश्यक है यदि एक ऑपरेटर को सूत्र में शामिल किया गया है।
उदाहरण के लिए, यदि आप प्रत्येक तीसरी पंक्ति के लिए पृष्ठभूमि रंग सेट करना चाहते हैं, तो आपका सूत्र 3n+0 होगा। आपका सीएसएस इस तरह दिख सकता है:
tr: nth-of-type (3n+0) {
पृष्ठभूमि: स्लेटग्रे;
}
nth-of-type चयनकर्ता का उपयोग करने के लिए सहायक उपकरण
यदि आप छद्म-वर्ग nth-of-type चयनकर्ता का उपयोग करने के सूत्र पहलू से थोड़ा परेशान महसूस कर रहे हैं, कोशिश करें: nth परीक्षक साइट एक उपयोगी उपकरण के रूप में जो आपको वांछित रूप प्राप्त करने के लिए वाक्य रचना को परिभाषित करने में मदद कर सकता है। nth-of-type का चयन करने के लिए ड्रॉपडाउन मेनू का उपयोग करें (आप यहां अन्य छद्म-वर्गों के साथ भी प्रयोग कर सकते हैं, जैसे कि nth-child)।