CSS काउंटर-इन्क्रीमेंट प्रॉपर्टी
उदाहरण
एक काउंटर बनाएं ("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-increment
संपत्ति एक या अधिक सीएसएस काउंटरों के मूल्य को बढ़ाती या घटाती है ।
संपत्ति का counter-increment
उपयोग आमतौर पर
काउंटर-रीसेट संपत्ति और
सामग्री संपत्ति के साथ किया जाता है।
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 2 |
जावास्क्रिप्ट सिंटैक्स: | वस्तु .style.counterIncrement = "उपखंड"; |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
सीएसएस सिंटेक्स
counter-increment: none|id|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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) ". ";
}
संबंधित पृष्ठ
सीएसएस संदर्भ: :: छद्म तत्व से पहले
सीएसएस संदर्भ: :: छद्म तत्व के बाद
सीएसएस संदर्भ: सामग्री संपत्ति
सीएसएस संदर्भ: काउंटर-रीसेट संपत्ति
सीएसएस फ़ंक्शन: काउंटर () फ़ंक्शन
HTML DOM संदर्भ: काउंटरइन्क्रिमेंट प्रॉपर्टी