सीएसएस काउंटर

पिज़्ज़ा

हैमबर्गर

हाॅट डाॅग

सीएसएस काउंटर सीएसएस द्वारा अनुरक्षित "चर" हैं जिनके मूल्यों को सीएसएस नियमों द्वारा बढ़ाया जा सकता है (यह ट्रैक करने के लिए कि उनका कितनी बार उपयोग किया जाता है)। काउंटर आपको दस्तावेज़ में सामग्री के स्थान के आधार पर उसकी उपस्थिति को समायोजित करने देते हैं।

काउंटरों के साथ स्वचालित नंबरिंग

सीएसएस काउंटर "चर" की तरह हैं। चर मानों को सीएसएस नियमों द्वारा बढ़ाया जा सकता है (जो ट्रैक करेगा कि उनका कितनी बार उपयोग किया गया है)।

CSS काउंटरों के साथ काम करने के लिए हम निम्नलिखित गुणों का उपयोग करेंगे:

counter-reset - काउंटर बनाता या रीसेट करता है
counter-increment - एक काउंटर वैल्यू बढ़ाता है
content - उत्पन्न सामग्री सम्मिलित करता है
counter()या counters()फ़ंक्शन - किसी तत्व में काउंटर का मान जोड़ता है

CSS काउंटर का उपयोग करने के लिए, इसे पहले counter-reset.

निम्न उदाहरण पृष्ठ के लिए एक काउंटर बनाता है (बॉडी चयनकर्ता में), फिर प्रत्येक <h2> तत्व के लिए काउंटर मान को बढ़ाता है और प्रत्येक <h2> तत्व की शुरुआत में "अनुभाग < काउंटर का मान >:" जोड़ता है:

उदाहरण

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

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

निम्न उदाहरण पृष्ठ (अनुभाग) के लिए एक काउंटर और प्रत्येक <h1> तत्व (उपखंड) के लिए एक काउंटर बनाता है। "अनुभाग" काउंटर की गणना प्रत्येक <h1> तत्व के लिए " अनुभाग काउंटर के अनुभाग < मान >" के साथ की जाएगी, और "उपखंड" काउंटर की गणना प्रत्येक <h2> तत्व के लिए "< अनुभाग काउंटर के मान के साथ की जाएगी। >.< उपखंड काउंटर का मूल्य >":

उदाहरण

body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

एक काउंटर आउटलाइन सूचियां बनाने के लिए भी उपयोगी हो सकता है क्योंकि काउंटर का एक नया इंस्टेंस स्वचालित रूप से चाइल्ड तत्वों में बनाया जाता है। यहां हम counters()नेस्टेड काउंटरों के विभिन्न स्तरों के बीच एक स्ट्रिंग डालने के लिए फ़ंक्शन का उपयोग करते हैं:

उदाहरण

ol {
counter-reset: section;
list-style-type: none;
}

li::before {
counter-increment: section;
content: counters(section,".") " ";
}