Using CSS counters

  • Revision slug: CSS_Counters
  • Revision title: CSS Counters
  • Revision id: 74741
  • Created:
  • Creator: Ptak82
  • Is current revision? No
  • Comment <breadcrumbs></breadcrumbs>

Revision Content

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.

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

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>

See also

{{ wiki.languages( { "pl": "pl/Liczniki_CSS" } ) }}

Revision Source

<p>
</p>
<h3 name="Summary"> Summary </h3>
<p>CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1. The value of a counter is manipulated through the use of <a href="en/CSS/counter-reset">counter-reset</a> and <a href="en/CSS/counter-increment">counter-increment</a> and is displayed on a page using the counter() or counters() function of the <a href="en/CSS/content">content</a> property.
</p>
<h3 name="Using_counters"> Using counters </h3>
<p>To use a CSS counter, it must first be <a href="en/CSS/counter-reset">reset</a> 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 <code>h1</code> element "Section <code>the value of the counter</code>:".
</p>
<pre>  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 */
  }
</pre>
<h3 name="Nesting_counters"> Nesting counters </h3>
<p>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:
</p>
<pre>  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 ".". */
  }
</pre>
<p>With the following HTML:
</p>
<pre>&lt;ol&gt;
  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
  &lt;li&gt;item               &lt;!-- 2     --&gt;
    &lt;ol&gt;
      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
        &lt;ol&gt;
          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
        &lt;/ol&gt;
        &lt;ol&gt;
          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
        &lt;/ol&gt;
      &lt;/li&gt;
      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
&lt;/ol&gt;
&lt;ol&gt;
  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
&lt;/ol&gt;
</pre>
<h3 name="See_also"> See also </h3>
<ul><li> <a href="en/CSS/counter-reset">counter-reset</a>
</li><li> <a href="en/CSS/counter-increment">counter-increment</a>
</li></ul>
{{ wiki.languages( { "pl": "pl/Liczniki_CSS" } ) }}
Revert to this revision