काउंटर और सूची की स्टाइल

कई तरह के कॉन्टेंट को एचटीएमएल सूची के तौर पर सबसे अच्छी तरह से दिखाया जा सकता है. ऑर्डर की गई सूची वाले कॉन्टेंट के लिए, मार्कर में अक्सर जानकारी भी शामिल होती है. जैसे, रेसिपी के चरण या लेख के फ़ुटनोट. सीएसएस, सूची में काउंटर को कंट्रोल करने के कई तरीके उपलब्ध कराता है.

सूची की स्टाइल

सूची के स्टाइल टाइप पहले से तय होते हैं. इनमें नंबर, अक्षर, रोमन अंक, और गिनती के कई अंतरराष्ट्रीय सिस्टम शामिल होते हैं.

ब्राउज़र के साथ काम करने वाली स्टाइल के अलावा, W3C ने रेडीमेड काउंटर स्टाइल पब्लिश की हैं. इनमें 45 स्क्रिप्ट में 181 अतिरिक्त स्टाइल इस्तेमाल की जा सकती हैं.

अगर ये विकल्प आपकी ज़रूरतों के मुताबिक नहीं हैं, तो कस्टम @counter-style भी तय किया जा सकता है. इसकी मदद से, कस्टम सिंबल, प्रीफ़िक्स, सफ़िक्स वगैरह तय किए जा सकते हैं.

डिफ़ॉल्ट रूप से, आइटम मार्कर outside सूची के सामने होता है और दाईं ओर अलाइन होता है. list-style-position: inside का इस्तेमाल करके, आइटम मार्कर को सूची में भी रखा जा सकता है.

काउंटर

सूची के आइटम मार्कर को कैसे दिखाया जाए, यह सूची की स्टाइल से कंट्रोल किया जाता है. वहीं, काउंटर की मदद से, दिखाई जाने वाली वैल्यू को कंट्रोल किया जा सकता है. <li> सूची के आइटम वाले एलिमेंट के लिए, ब्राउज़र list-item नाम का एक काउंटर बनाता है. यह काउंटर, सूची के हर आइटम के लिए 1 से बढ़ता है.

सीएसएस काउंटर, counter-increment वैल्यू सेट किए गए एलिमेंट के रेंडर होने की संख्या को ट्रैक करते हैं.

नया काउंटर बनाने के लिए, काउंटर के नाम और शुरुआती वैल्यू के साथ counter-reset का इस्तेमाल करें. शुरुआती वैल्यू देना ज़रूरी नहीं है. आम तौर पर, इसे उस पैरंट एलिमेंट पर सेट किया जाता है जिसमें गिने जाने वाले सभी एलिमेंट होते हैं.

इसके बाद, आपको जिस एलिमेंट को गिनना है उस पर counter-increment प्रॉपर्टी जोड़ें.

आखिर में, counter() फ़ंक्शन का इस्तेमाल करके काउंटर वैल्यू दिखाएं.

इस उदाहरण में, हमें हर फ़ुटनोट के लिए लिंक टेक्स्ट के तौर पर, फ़ुटनोट की गिनती दिखानी है. हमें पूरे दस्तावेज़ के लिए एक ही काउंटर चाहिए. इसलिए, हमने counter-reset: note को बॉडी पर सेट किया है और हर फ़ुटनोट लिंक पर बढ़ाया है.

आपके पास अलग-अलग आइटम को गिनने वाले कई काउंटर भी हो सकते हैं. फ़ुटनोट के उदाहरण में, अगर आपको उस सेक्शन और पैराग्राफ़ का इंडेक्स दिखाना हो जिसमें फ़ुटनोट मौजूद है, तो क्या करें?

counter-reset का इस्तेमाल करके, बॉडी में सेक्शन की संख्या बनाई जा सकती है. इसके बाद, हर <h2> एलिमेंट पर इसे बढ़ाया जा सकता है. हमें हर सेक्शन के लिए पैराग्राफ़ की संख्या को रीसेट करना है. इसलिए, हम <h2> एलिमेंट पर counter-reset का इस्तेमाल करेंगे और <p> एलिमेंट पर बढ़ाएंगे.

आखिर में, हम काउंटर वैल्यू को content प्रॉपर्टी में जोड़ते हैं.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

नेस्ट किए गए काउंटर

किसी सूची के अंदर सूची को नेस्ट करने पर क्या होता है? list-item काउंटर को हर <ul> या <ol> एलिमेंट के लिए शुरू किया जाता है. साथ ही, counter() का इस्तेमाल करने पर, सिर्फ़ सबसे अंदरूनी गिनती की संख्या मिलती है. अगर आपको नेस्ट किए गए हर काउंटर की संख्या दिखानी है, तो counters() फ़ंक्शन का इस्तेमाल करें. यह फ़ंक्शन, काउंटर का नाम और सेपरेटर लेता है.

li::marker {
  content: counters(list-item, ".")
  }

काउंटर को उलटा करना

डिफ़ॉल्ट रूप से, काउंटर (इसमें <ol> एलिमेंट के लिए, इंप्लिसिट list-item काउंटर भी शामिल है) 0 से शुरू होते हैं. साथ ही, हर एलिमेंट के लिए इनकी गिनती एक से बढ़ती है. इसका मतलब है कि पहले एलिमेंट को 1 के तौर पर गिना जाएगा. अगर आपको 1 से शुरू करके उल्टी गिनती करनी हो, तो क्या करें?

इसके लिए, reversed एट्रिब्यूट को <ol> में जोड़ें. अगर स्टैंडर्ड लिस्ट स्टाइल का इस्तेमाल किया जा रहा है, तो मार्कर उम्मीद के मुताबिक काम करेंगे. हालांकि, अगर कस्टम काउंटर का इस्तेमाल किया जा रहा है, तो आपको counter-increment को नेगेटिव वैल्यू पर सेट करना होगा. साथ ही, काउंटर के लिए शुरुआती वैल्यू का हिसाब मैन्युअल तरीके से लगाना होगा.

देखें कि आपको कितना समझ आया