← Back to CSS Course | Chapter 6: Selectors & Styling | Lesson 14 of 22

CSS Counters

किसी busy post office में supervisor होने की कल्पना करें। हर visitor entry पर एक numbered paper ticket लेता है: ticket 1, ticket 2, ticket 3, वगैरह। आप ये numbers tickets पर हाथ से नहीं लिखते। इसके बजाय, आपके पास एक ticketing machine है जो हर बार कोई ticket खींचने पर number को automatically बढ़ा देती है। CSS counters वही automated ticketing machines हैं। ये आपकी stylesheets को elements (जैसे headers, chapters, या steps) को automatically count करने देते हैं, आपको उन्हें हाथ से type किए बिना sequence numbers आपके page पर दिखाते हुए।

In this page:

  1. counter-reset से Counters Initialize करना
  2. counter-increment से Counters को Increment करना
  3. Content के साथ Counters Render करना
  4. Nested Counters को Handle करना
  5. Counter Styles को Customize करना
Syntax
css 
body {
  counter-reset: counter-name;
}
selector::before {
  counter-increment: counter-name;
  content: counter(counter-name);
}

counter-reset से Counters Initialize करना

एक CSS counter शुरू करने के लिए, आपको एक parent element पर counter-reset property इस्तेमाल करके इसकी value initialize करनी होगी, जो आपके counter variable की starting value set करती है (default रूप से zero)। counter-set counter-reset जैसा ही काम करता है लेकिन अगर scope में पहले से कोई counter मौजूद न हो तो एक नया नहीं बनाता -- यह सिर्फ किसी existing counter की value set करता है, जो किसी list के बीच में किसी counter की value को उसे parent से restart किए बिना reset करने के लिए उपयोगी बनाता है।

Note:
  • अपने counter-reset properties को उस list के parent container पर declare करें जिसे आप count करना चाहते हैं।
  • Accepted values:
  • counter-reset — नाम और optional start value, जैसे section 0
  • counter-set — counter-reset जैसा लेकिन एक existing counter की value set करता है
  • none — कोई counter change नहीं (initial value)
  • integer — negative हो सकता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: अगर आप किसी parent element पर counter-reset declare नहीं करते, तो counter initialize होने में fail हो जाएगा।

उदाहरण: Initializing Counters with counter-reset

css 
<style>
ol {
  counter-reset: item;
}
</style>
<ol><li>First</li></ol>

counter-increment से Counters को Increment करना

counter-increment property browser को आपके custom counter variable की value बढ़ाने के लिए बताती है। हर बार जब browser targeted element से टकराता है, यह counter को ऊपर tick करता है (default रूप से 1 से)।

Note:
  • steps में count करने के लिए आप एक custom increment value specify कर सकते हैं (जैसे counter-increment: chapter 2)।
  • Accepted values:
  • counter-increment — नाम और optional step, जैसे section 1
  • counter-reset — नाम और optional start value, जैसे section 0
  • none — कोई counter change नहीं (initial value)
  • integer — negative हो सकता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: सुनिश्चित करें कि आपकी counter-increment property सही तरीके से targeted है, वरना आपकी count values ऊपर tick होने में fail हो जाएँगी।

उदाहरण: Incrementing Counters with counter-increment

css 
<style>
ol {
  counter-reset: item;
}
li {
  counter-increment: item;
}
</style>
<ol>
  <li>Ticks up by 1 each time</li>
  <li>Ticks up by 1 each time</li>
</ol>

Content के साथ Counters Render करना

अपने counter value को अपनी webpage पर दिखाने के लिए, आप एक CSS pseudo-element (::before या ::after) की content property के अंदर counter() function इस्तेमाल करते हैं, जो browser को calculated numbers automatically render करने देता है।

Note: अपने labels को साफ़ तरीके से format करने के लिए counter() को अपनी content property के अंदर string prefixes के साथ combine करें (जैसे content: "Chapter " counter(chapter) ": ";)।
Warning: अपने page पर counter values render करने के लिए आपको pseudo-elements (::before या ::after) इस्तेमाल करने ही होंगे।

उदाहरण: Rendering Counters with Content

css 
<style>
ol {
  counter-reset: item;
  list-style: none;
}
li {
  counter-increment: item;
}
li::before {
  content: "Chapter " counter(item) ": ";
}
</style>
<ol>
  <li>Introduction</li>
  <li>Basics</li>
</ol>

Nested Counters को Handle करना

आप complex, multi-level outlines (जैसे section '1.1' या '1.1.1') handle करने के लिए counters को nest कर सकते हैं। counters() function (आख़िर में एक s के साथ) इस्तेमाल करके, आप browser को nested counters को automatically dots से अलग करके render करने का instruction दे सकते हैं।

Note: complex multi-level manuals या documentation index lists को style करने के लिए nested counters इस्तेमाल करें।
Warning: Nested counters को alignments साफ़ तरीके से render करने के लिए precise list indentation styles चाहिए होती हैं।

उदाहरण: Handling Nested Counters

css 
<style>
ol {
  counter-reset: section;
  list-style: none;
}
li {
  counter-increment: section;
}
li::before {
  content: counters(section, ".") " ";
}
</style>
<ol>
  <li>Chapter
    <ol><li>Nested section</li></ol>
  </li>
</ol>

Counter Styles को Customize करना

आप अपने counter() function को एक style parameter (जैसे upper-roman या lower-alpha) pass करके यह customize कर सकते हैं कि आपके counter numbers कैसे display होते हैं, जिससे आप Roman numerals या alphabetical sequences आसानी से render कर सकते हैं।

Note:
  • अपनी lists को पढ़ने और follow करने में आसान बनाने के लिए sub-steps के लिए lowercase letters इस्तेमाल करें।
  • Accepted values:
  • decimal — 1, 2, 3 (initial value)
  • lower-alpha / upper-alpha — a, b, c या A, B, C
  • lower-roman / upper-roman — i, ii, iii या I, II, III
  • disc / circle / square — bullets
  • none — कोई marker नहीं
Warning: अगर आप rare, non-standard numbering styles इस्तेमाल करते हैं तो browser support verify करें।

उदाहरण: Customizing Counter Styles

css 
<style>
ol {
  counter-reset: item;
  list-style: none;
}
li {
  counter-increment: item;
}
li::before {
  content: counter(item, upper-roman) ". ";
}
</style>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>
Live Example
Related Topics

CSS Forms · CSS Specificity · CSS Attribute Selectors · CSS Specificity Hierarchy

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. counter-reset इस्तेमाल करके किसी parent element पर अपनी counter values initialize करना भूल जाना।
  2. ज़रूरी ::before या ::after pseudo-elements इस्तेमाल किए बिना elements के अंदर सीधे counter values दिखाने की कोशिश करना।
  3. nested lists पर simple counter() function इस्तेमाल करना जबकि sub-level numbering दिखाने के लिए counters() चाहिए होगा।
चैप्टर सारांश
  • CSS counters stylesheets को page elements को automatically count करने और sequence numbers को साफ़ तरीके से दिखाने देते हैं।
  • counter-reset इस्तेमाल करके किसी parent element पर अपना counter initialize करें, और child elements पर counter-increment इस्तेमाल करके value को ऊपर tick करें।
  • ::before या ::after pseudo-elements की content property के अंदर counter() या counters() functions इस्तेमाल करके अपने counter values दिखाएँ।
ब्राउज़र सपोर्ट

Standard CSS counters और nested list count functions हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Forms Next Lesson → CSS Specificity

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.