Skip to main content

Visit Mozilla.org

CSS Counters

From MDC

Contents

[edit] Summary

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.

[edit] Using counters

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 */
}

[edit] Nesting counters

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 ".". */
  }

With 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>

[edit] Specifications

[edit] See also

There is an additional example available at http://www.mezzoblue.com/archives/2006/11/01/counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

Retrieved from "http://developer.mozilla.org/en/docs/CSS_Counters"