वापरणे: टेस्टसह एनटी-ऑफ-टाइप (एन)
सारण्या वाचण्यास सोपे करण्यासाठी, ते अनेकदा पर्यायी पार्श्वभूमी रंगांच्या शैली पंक्तींना उपयुक्त ठरतात. शैली सारण्यांचे सर्वात सामान्य मार्ग म्हणजे प्रत्येक इतर पंक्तीचा पार्श्वभूमी रंग सेट करणे. याला बर्याचदा "झेब्रा पट्ट्या" असे म्हटले जाते.
आपण ही प्रत्येक पंक्ती एका CSS वर्गाने सेट करून आणि नंतर त्या वर्गासाठी शैली परिभाषित करून पूर्ण करू शकता. हे कार्य करते परंतु त्याबद्दल जाण्यासाठी हा सर्वोत्तम किंवा सर्वात प्रभावी मार्ग नाही.
ही पद्धत वापरताना प्रत्येक वेळी आपल्याला हे टेबल संपादित करण्याची आवश्यकता असेल तर प्रत्येक ओळीत बदल होण्याची शक्यता आहे. उदाहरणार्थ, जर आपण आपल्या टेबलमध्ये एक नवीन पंक्ती घालू इच्छित असाल तर खालील प्रत्येक ओळीत वर्ग बदलणे आवश्यक आहे.
सीझ्झ झेब्रा पट्ट्यासह शैलीच्या सारण्यांना सोपे करतो. आपल्याला कोणत्याही अतिरिक्त HTML विशेषता किंवा CSS वर्ग जोडण्याची आवश्यकता नाही, आपण केवळ हे वापरता: nth-of-type (n) css selector
The: nth-of-type (n) selector CSS मधील एक स्ट्रक्चरल स्यूडो-क्लास आहे जो पालक आणि भावी घटकांच्या संबंधांवर आधारित शैलीतील घटक आपल्याला अनुमती देतो. आपण त्यांच्या स्रोत ऑर्डरवर आधारित एक किंवा अधिक घटक निवडण्यासाठी ते वापरू शकता दुसऱ्या शब्दात सांगायचे तर ते एका विशिष्ट प्रकारच्या त्याच्या पालकांच्या एनथ चाइल्ड असलेल्या प्रत्येक घटकाशी जुळते.
अक्षर n हे कीवर्ड असू शकते (जसे विषम किंवा अगदी), एक संख्या किंवा सूत्र.
उदाहरणार्थ, पिवळ्या पार्श्वभूमी रंगासह प्रत्येक इतर परिच्छेद टॅग शैली करण्यासाठी, आपल्या सीएसएस कागदपत्रात हे समाविष्ट होईल:
p: nth-of-type (विचित्र) {
पार्श्वभूमी: पिवळा;
}
आपल्या HTML सारणीसह प्रारंभ करा
प्रथम, आपण सामान्यपणे HTML मध्ये लिहू शकता म्हणून आपले टेबल तयार करा पंक्ती किंवा कॉलम्समध्ये कोणत्याही विशिष्ट वर्ग जोडू नका.
आपल्या स्टिकशीटमध्ये, खालील CSS जोडा:
tr: nth-of-type (विचित्र) {
पार्श्वभूमी-रंग: # सीसीसी;
}
हे प्रत्येक दुसर्या ओळीला पहिल्या रेषेपासून प्रारंभ होणाऱ्या ग्रे पार्श्वभूमी रंगाची शैली करेल.
त्याच पद्धतीने शैली एकांतरीत करणे स्तंभ
आपण आपल्या सारणीमध्ये स्तंभांवर समान प्रकारचे शैली करू शकता. असे करण्यासाठी, फक्त टी डी मध्ये आपल्या सीएसएस वर्गात TR ला बदला. उदाहरणार्थ:
टीडी: एनटी-ऑफ-टाइप (विचित्र) {
पार्श्वभूमी-रंग: # सीसीसी;
}
एक एनटी-ऑफ-टाईप (एन) सिलेक्टरमधे फॉर्मुला वापरणे
निवडकर्ता मध्ये वापरल्या जाणार्या सूत्रासाठी वाक्यरचना एक + ब आहे.
एक म्हणजे अशी संख्या जी सायकल किंवा निर्देशांक आकाराचे प्रतिनिधीत्व करते.
n प्रत्यक्षात अक्षर "n" आहे आणि काउंटर दाखवते, जे 0 वाजता तारे
+ एक ऑपरेटर आहे, जे कदाचित "-"
b एक पूर्णांक आहे आणि ऑफसेट मूल्याचे प्रतिनिधित्व करते- उदाहरणार्थ, निवडकाने पार्श्वभूमीचा रंग लागू करणे किती प्रमाणात सोडते? ऑपरेटरला सूत्रामध्ये समाविष्ट केले असल्यास हे आवश्यक आहे.
उदाहरणार्थ, जर आपण प्रत्येक तिस-या पंक्तीसाठी पार्श्वभूमी रंग सेट करु इच्छित असाल तर आपला सूत्र 3n + 0 असेल आपले सीएसएस कदाचित असे दिसेल:
tr: nth-of-type (3n + 0) {
पार्श्वभूमी: slategray;
}
Nth-of-kind selector वापरण्यासाठी उपयुक्त साधने
छद्म-दर्जाच्या नऊ-ऑफ-टाइप निवडकर्त्याचा वापर करण्याच्या सूत्र पद्धतीमुळे आपल्याला थोडासा त्रास होत असेल तर: nth Tester साइट हे एक उपयुक्त साधन म्हणून प्रयत्न करा जे तुम्हाला इच्छित स्वरूप प्राप्त करण्यासाठी सिंटॅक्स परिभाषित करण्यास मदत करू शकेल. नॅन्ड-ऑफ-टाइप निवडण्यासाठी ड्रॉपडाउन मेनू वापरा (आपण येथे इतर छद्म-वर्गांसह प्रयोग देखील करू शकता, जसे की nth-child).