How to use counters in CSS

There are two CSS properties to control the numbering in CSS, counter-reset and counter-increment.

• counter-reset - sets a variable that will store the value of the counter by default;
• counter-increment - increases or decreases the counter value by a specified number.

The property counter-reset contains a list of one or more counter names, after each name you may give an integer. It sets a value assigned for the counter with each new occurrence of the element. By default it's equal to 0.

The property counter-increment allows you to use one or more counter names (identifiers), each of which may be specified with an integer. It determines the amount by which the counter is increased at each occurrence of the element. By default, the increment is equal to 1. You can also use negative integers.

If an element increases/resets the counter and uses it (in the property content of its pseudo-element before or after), then the counter is used after being increased/reset. If an element both resets and increases the counter, the counter content is first reset and then increased.

HTML:

<h1>Programming languages</h1>
<h2>HTML and CSS</h2>
<h2>JavaScript</h2>
<h2>PHP</h2>
<h2>Java</h2>

<h1>Database management systems</h1>
<h2>MySQL</h2>
<h2>MariaDB</h2>
<h2>PostgreSQL</h2>
<h2>Oracle</h2>

CSS:

body {
  counter-reset: chapter;  
}

h1 {
  counter-reset: section;
  counter-increment: chapter;
}

h2 {
  counter-increment: section;
}

h1:before {
  content: "Chapter " counter(chapter) ". ";
}

h2:before {
  content: counter(chapter) "." counter(section) " ";
}

Live demo

Counter styles

By default, counters are specified in decimals, but along with decimals all other styles of representation are available for counters, they are given in the property list-style-type.

In general, the following entry is used:

counter( counter_name, list_style_type )

Where:

• counter_name - counter variable;
• list_style_type - display style, allows any style including disc, circle, square or none.

To see how it works, styles for selector h1:before should be replaced with the following:

h1:before {
  content: "Chapter " counter(chapter, upper-roman) ". ";
}

Live demo

Important notice

Hidden element which has property display set to value none, can not increase or decrease the value of the counter.

For example, if we add the following styles to the above mentioned, the element h1 will not increase or reset the value of the counter:

h1 {
  display: none;
}

Live demo

On the other hand, elements which have the property visibility set to value hidden, do increase counter values:

h1 {
  visibility: hidden;
}

Live demo

Browser support