FANDOM


CSS counters are an implementation of automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed on a page using the counter() or counters() function of the content property.

Usage

To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following example adds to the beginning of each <h1> element "Section <the value of the counter>:".

body {  
  counter-reset: section;           /* Set the section counter to 0 */  
}  
h1:before {  
  counter-increment: section;      /* Increment the section counter */  
  content: "Section " counter(section) ": "; /* Display the counter */  
}

Nesting

A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the counters() function, a string can be inserted between different levels of nested counters:

ol {  
    counter-reset: section;                /* Creates a new instance of the 
                                              section counter with each ol 
                                              element */  
    list-style-type: none;  
}  
li:before {  
    counter-increment: section;            /* Increments only this instance 
                                              of the section counter */  
    content: counters(section, ".") " ";   /* Adds the value of all instances 
                                              of the section counter separated 
                                              by a ".". */  
}

Applied to the following HTML:

<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.