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

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

सिंटैक्स

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

वैल्यूज

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

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

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

Результат:

यह भी देखें