CSS Counters

There’s often a need to list items on the webpage in an orderly fashion. These items can be ordered products in a wish-list or Steps to be followed in a tutorial.

Making a dynamic list that can add counters to the list element is another popular feature provided by CSS. CSS counters are, basically, “variables” which are used to track their own recurrence.

In other words, each time the “counter” element occurs on the page, it will have an incremented value associated with it. This is an automatic process where the increment in variables can tell us the exact number of times they are used.

In order to style any element for counting itself, we have 4 CSS properties:

  • counter-reset – This resets the counter to the initial value
  • counter-increment – Responsible for incrementing the counter. Value can be following
    • none: No increment (default value)
    • id number: ‘id’ is used to identify the counter that has to be incremented while the ‘number’ decides the incrementing value
    • initial: To set to the default value
    • inherit: Inherits from the containing element
  • content: The content of the counter that will be shown on every increment
  • counter() or counters() function – Add the incremented value to the content.

It is necessary to create the counter-reset in order to use the counter in CSS. In case the id, mentioned in the counter-increment property, points to a counter that is not reset, the default initial value will be taken as 0.

Nesting Counters

We can create counter within counters. This is called nesting and is quite useful for webpages that have modularized text data like tutorials or wiki pages.

We use the counter function to indicate the nesting. Let’s say ‘section’ and ‘subsection’ are two counters where the ‘subsection’ is for <h2>, to be nested inside ‘section’ which is for <h1>. So, to increment subsection, we can use the counter function as

counter(section)<delimiter>counter(subsection).

Thus, the value of subsection will increment but the value of section will remain the same because of the different target elements.