काउंटर-इंक्रीमेंट प्रॉपर्टी

counter-increment प्रॉपर्टी एलिमेंट्स की ऑटोमैटिक नंबरिंग सेट करती है, उदाहरण के लिए, पैराग्राफ या हेडिंग की। यह counter-reset प्रॉपर्टी, after और before प्स्यूडोएलिमेंट्स, content प्रॉपर्टी के साथ मिलकर उपयोग की जाती है, जिसके अंदर counter फंक्शन उपयोग होता है। बेहतर समझ के लिए मैं उदाहरण देखने की सलाह देता हूं।

सिंटैक्स

सिलेक्टर {
	counter-increment: नाम [स्टेप] | none;
}

वैल्यूज

वैल्यू	विवरण
नाम	काउंटर का नाम। एक साधारण शब्द (जैसे क्लास या आईडी का नाम)। कई नाम सेट किए जा सकते हैं, उन्हें स्पेस से अलग करके। इस स्थिति में एक साथ कई काउंटर बदल जाएंगे।
स्टेप	पूर्ण सकारात्मक या नकारात्मक संख्या। ऐच्छिक पैरामीटर।
`none`	मौजूदा सिलेक्टर के लिए काउंटर की वृद्धि प्रतिबंधित करता है।

डिफॉल्ट वैल्यू: none.

उदाहरण

आइए पैराग्राफ की ऑटोमैटिक नंबरिंग करवाते हैं:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

उदाहरण

मान लीजिए नंबरिंग के साथ कोई और टेक्स्ट भी जुड़ जाए। हमारे मामले में № नंबर के आगे और डॉट पीछे:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

उदाहरण

नंबरिंग 10 से शुरू करते हैं। इसके लिए काउंटर की शुरुआती वैल्यू नौ रखते हैं, यानी हमें जितना चाहिए उससे 1 कम:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

उदाहरण

मान लीजिए अब नंबरिंग "2" के स्टेप से हो। इसके लिए स्टेप के रूप में दो रखते हैं:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* दो रखते हैं */
	content: "№" counter(test) ".";
}

उदाहरण

पिछले उदाहरण में नंबरिंग दो से शुरू हुई, और हम एक से चाहते थे। ऐसा क्यों हुआ? क्योंकि counter-reset काउंटर की वैल्यू जीरो में रीसेट कर देता है, और फिर counter-increment अपना स्टेप जोड़ता है: डिफॉल्ट रूप से एक, इसलिए पहले हमारे पास नंबरिंग 1 से शुरू होती थी। और अब दो जुड़ जाता है - और नंबरिंग शुरू होती है दो से।

समस्या ठीक करने के लिए काउंटर की शुरुआती वैल्यू -1 में रखते हैं और अब नंबरिंग 1 से शुरू होगी और 2 से बढ़ेगी:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

यह भी देखें

counter-reset प्रॉपर्टी,
जो काउंटर की वैल्यू जीरो में रीसेट करती है