काउंटर-रीसेट - सीएसएस-ट्रिक्स

counter-resetसंपत्ति तत्वों का स्वत: क्रमांकन के लिए अनुमति देता है। एक आदेश सूची की तरह (

), लेकिन यह किसी भी तत्व पर काम करता है। यह थीसिस पेपर जैसी किसी चीज़ के लिए सामग्री की तालिका बनाने या शीर्षकों की संख्या बनाने में विशेष रूप से उपयोगी है। काउंटरों को सामग्री संपत्ति के माध्यम से लागू किया जाता है। एक सरल उदाहरण:

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetसंपत्ति किसी दिए गए मूल्य के लिए एक सीएसएस काउंटर रीसेट करने के लिए प्रयोग किया जाता है।

यह CSS काउंटर मॉड्यूल का हिस्सा है जो उत्पन्न सामग्री, स्वचालित नंबरिंग का हिस्सा है, और CSS2.1 विनिर्देश को सूचीबद्ध करता है, जो जेनरेट और रिप्लेस्ड सामग्री मॉड्यूल CSS3 विनिर्देश में विस्तारित है।

वाक्य - विन्यास

counter-reset: ( ?)+ | none

कहा पे…

• उस काउंटर का नाम है जिसे आप रीसेट करना चाहते हैं
• काउंटर को रीसेट करने का मान है
• none काउंटर को अक्षम करें

body ( counter-reset: my-awesome-counter 0; )

नोट: पूर्णांक के लिए डिफ़ॉल्ट मान 0. है। यदि काउंटर नाम के बाद कोई पूर्णांक सेट नहीं है, तो इसे 0. पर रीसेट किया जाएगा। इस प्रकार, यह उम्मीद के अनुसार काम करता है:

body ( counter-reset: my-awesome-counter; )

यदि आप ऐसा चाहते हैं, तो आप स्पेस-अलग-अलग सूची के साथ कई काउंटरों को एक बार फिर से सेट कर सकते हैं।

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

यह my-awesome-counter5 और my-other-counterडिफ़ॉल्ट मान पर रीसेट हो जाएगा : 0।

आप के रूप में इस सूची देख सकते हैं: counter1 value1 counter2 value2 counter3 value3… । यदि कोई मान छोड़ा जाता है, तो यह 0 है।

डेमो

निम्नलिखित डेमो में, इसके डिफ़ॉल्ट मान (0) पर काउंटर articleरीसेट करता है section, जिसे बाद में प्रत्येक अनुभाग में बढ़ाया जाता है, फिर अनुभाग शीर्षकों के सामने प्रदर्शित किया जाता है।

इस पेन को देखें!

अधिक जानकारी

• युक्ति में काउंटर-रीसेट
• MDN पर काउंटर-रीसेट

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
2+	3.1+	कोई	9.2+	8+	कोई	कोई