CSS
काउंटर

वाक्य - विन्यास

• काउंटर-सेट: [<काउंटर-नाम> <पूर्णांक>? ] + | कोई नहीं

• काउंटर-रीसेट: [<काउंटर-नाम> <पूर्णांक>? ] + | कोई नहीं

• प्रति-वृद्धि: [<काउंटर-नाम> <पूर्णांक>? ] + | कोई नहीं

• काउंटर (<काउंटर-नाम> [, <काउंटर-शैली>]?)

• काउंटरर्स (<काउंटर-नाम>, <कनेक्टर-स्ट्रिंग> [, <काउंटर-स्टाइल>]?]

पैरामीटर

टिप्पणियों

काउंटर आउटपुट के लिए स्टाइलिंग रोमन अंक लागू करना

सीएसएस

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

एचटीएमएल

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

उपरोक्त उदाहरण में, काउंटर का आउटपुट I, II, III (रोमन संख्या) के रूप में प्रदर्शित किया जाएगा, बजाय सामान्य, 1, 2, 3 के रूप में डेवलपर ने काउंटर की शैली को स्पष्ट रूप से निर्दिष्ट किया है।

सीएसएस काउंटर का उपयोग करके प्रत्येक आइटम की संख्या

सीएसएस

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

एचटीएमएल

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

उपरोक्त उदाहरण पृष्ठ में प्रत्येक "आइटम" नंबर और उसके हेडर से पहले आइटम की संख्या को जोड़ता है (छद्म :before .item-header तत्व की content का उपयोग करके)। इस कोड का एक लाइव डेमो यहां उपलब्ध है ।

सीएसएस काउंटरों का उपयोग करके बहु-स्तरीय नंबरिंग को लागू करना

सीएसएस

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

एचटीएमएल

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

ऊपर सीएसएस काउंटरों का उपयोग करके बहु-स्तरीय नंबरिंग का एक उदाहरण है। यह काउंटरों की सेल्फ-नेस्टिंग अवधारणा का उपयोग करता है। सेल्फ नेस्टिंग एक अवधारणा है, जहां अगर किसी तत्व के पास पहले से ही दिए गए नाम के साथ एक काउंटर है, लेकिन एक और बनाने के लिए है, तो यह मौजूदा काउंटर के बच्चे के रूप में बनाता है। यहां, दूसरा स्तर ul पहले से ही अपने माता list-item-number पिता से list-item-number काउंटर को प्राप्त करता है, लेकिन फिर अपनी list-item-number (अपने बच्चों के लिए li ) का निर्माण करना होता है और इसलिए list-item-number[1] (के लिए काउंटर बनाता है) दूसरा स्तर) और इसे list-item-number[0] (पहले स्तर के लिए काउंटर) के तहत घोंसला बनाते हैं। इस प्रकार यह बहु-स्तरीय संख्या को प्राप्त करता है।

उत्पादन का उपयोग कर मुद्रित होता है counters() के बजाय समारोह counter() समारोह क्योंकि counters() समारोह जब उत्पादन मुद्रण सभी उच्च स्तर काउंटरों (पैरेंट) का मूल्य उपसर्ग बनाया गया है।