सीएसएस काउंटर-रीसेट संपत्ति
उदाहरण
एक काउंटर बनाएं ("my-sec-counter") और <h2> चयनकर्ता की प्रत्येक घटना के लिए इसे एक-एक करके बढ़ाएं:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
counter-reset
संपत्ति एक या अधिक CSS काउंटर बनाती या रीसेट करती है ।
संपत्ति का counter-reset
उपयोग आमतौर पर
काउंटर-इंक्रीमेंट संपत्ति और
सामग्री संपत्ति के साथ किया जाता है।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 2 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.counterReset = "सेक्शन" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
सीएसएस सिंटेक्स
counter-reset: none|name number|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
एक काउंटर बनाएं ("my-sec-counter") और <h2> चयनकर्ता की प्रत्येक घटना के लिए इसे एक-एक करके घटाएं:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
उदाहरण
"अनुभाग 1:", "1.1", "1.2", आदि के साथ अनुभागों और उप-अनुभागों को क्रमांकित करना:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
उदाहरण
<h2> चयनकर्ता की प्रत्येक घटना के लिए एक काउंटर बनाएं और इसे एक (रोमन अंकों का उपयोग करके) बढ़ाएं:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
संबंधित पृष्ठ
CSS संदर्भ: :: छद्म तत्व से पहले
सीएसएस संदर्भ: :: छद्म तत्व के बाद
सीएसएस संदर्भ: सामग्री संपत्ति
CSS संदर्भ: काउंटर-इन्क्रीमेंट प्रॉपर्टी
सीएसएस फ़ंक्शन: काउंटर () फ़ंक्शन
एचटीएमएल डोम संदर्भ: काउंटर रीसेट संपत्ति