Home / Articles / Programming languages / Markup languages / HTML & CSS / How to use counters in CSS

How to use counters in CSS

How to use counters in CSS
 
How to use counters in CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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

Browser

IE

Firefox

Chrome

Safari

Opera

Minimum version

8

2

4

3.1

9


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

Discussion (total 1 comments)

Junaid Ahmed
February 09, 2014 at 11:41 am
I was just looking about that, thanks for worth sharing.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation