CSS Counters function

CSS 2.1 introduced CSS counters. Using Counters in CSS we can keep track on the placement of any element in the document tree and automatic number those elements.

Syntax - counters( <identifier>, <string> [, [ <counter-style> | none ] ]? )

Quick example - 

.class:before {
  content: counters(my-counter, ".", upper-alpha) ": ";
  font-weight: bold;
}

 

In CSS Counters, counting requires two properties - counter-reset and counter-increment

counter-reset resets the count to the defined initial point from where the counter will start and then the counter-increment is used to generate the numbers.

CSS Counters are generated content and to show them we use the content property to display counts.

By default, counters use decimal numbers. However, we can use any value that's also a valid value for list-style-type. (https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)

Syntax - (counterName,list-style-type value)

counter() or counters() function - The difference between counter() function and the counters() function is that singular form is used to output counter while plural form counters() is used to output nested counters.


Let's have a very basic example of the CSS counter function -

HTML

<p>Aplha</p>
<p>Beta</p>
<p>Gama</p>
<p>Delta</p>


CSS

.isWrapper{
    counter-reset: my-counter 0;
}
p{
    counter-increment: my-counter;
}
.isWrapper p:before{
    content: counter(my-counter)". ";
}

 

Output

css-counter-example


Very easy!

In case you are wondering the usage of CSS counters compared to ordered-lists, it is completely different. We can number the element in DOM without changing their position and number all the non-consecutive elements but in ordered-lists, we have to arrange the items by the required position.

We can number any element in the DOM and design the list-style-type.

CSS Counter function comes with a lot of easy customizations -

We can control the style of the counter by comma separating the counter function.

.isWrapper p:before{
    content: counter(my-counter, upper-roman)". ";
}

 

Controlling Counters initial Point - We have complete control over the start point of the counter. By resetting it to the desired numerical value we can set the starting point of the counter.


Negative Counters - We can have the negative counter ( reversed order) by defining a negative count.

Example 

counter-increment: my-counter -1;

 

Auto-numbering Nested Lists

<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>

 

CSS

ol {
    counter-reset: table-of-content;
    list-style-type: none
}
li::before {
    counter-increment: table-of-content;
    content: counters(table-of-content,".", decimal) " ";
}

Output

nested-css-counter-example

Browser support for CSS Counters - https://goo.gl/BqvYo3

 

A Quick Recap -

1- set the counter reset -

.awesome-list{
    counter-reset: counter-name; /* custom identifier */
}


2- Define counter increment

.awesome-list-counter {
     counter-increment: counter-name;
}

3- Position the dynamically generated number

.awesome-list-counter:before {
    content: counter(counter-name);
}

 

Let's have a beautiful example using CSS counter function.

 css-counter-style-example

Check out the JSFiddle demo link in the sidebar.

#Code Snippets #CSS #Front-end development