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