The Guide on Calculating and Nesting CSS Counters

How to work with CSS counters

CSS counter is a type of a variable that modifies the look of the content according to where it is located on the page. CSS checks how may times a particular counter has been used by incrementing it.

There are three main properties you can use to work with counters – CSS content, CSS counter increment and CSS counter reset:

Counters in CSS numbered lists

We will be using two properties – counter-reset, and counter-increment – to calculate CSS counters. To display them, we will need to use content paired with two CSS counter-specific functions: counter() and counters().

You should start working on your CSS variables by creating counter-reset. Only then you can define counter-increment and content.

The example below shows how you can create a counter using CSS, then increment the value of the counter for each <h1> element. We also add "Chapter " counter(chapter) " which shows the chapter name with a relevant number before each heading:

body {
    counter-reset: counter;
}

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

Nesting counter lists

Many modern websites with a lot of headings and subheadings have tables of contents. You can create one using counters as well.

In the example below, you can see CSS showing numbers for both chapters and subchapters:

body {
    counter-reset: chapter;
}

h1 {
    counter-reset: subchapter;
}

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

h2::before {
    counter-increment: subchapter;
    content: counter(chapter) "." counter(subchapter) " ";
}

The chapter counter increments and displays the current chapter counter value in each individual first level heading. Meanwhile, the sub-chapter counter increments for each second level heading by the current chapter counter value and the current sub-chapter counter value with a period (.) between them.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Outlined lists

Counters are also useful for creating outlined lists. In HTML, you cannot continue incrementing on a previous level of a list once you've gone into a further level. However, it's possible with CSS counters.

We are going to use the counters() function to insert a string between different levels of nested counters:

ol {
    counter-reset: list;
    list-style-type: none;
}  	

li::before {
    counter-increment: list;
    content: counters(list, ".") " ";
}

CSS counter: useful tips

• When simply listing something, you can use the simple HTML ordered list as well. It also conveys the semantic meaning of a list.
• By adding a second value to content, you can modify the CSS counter style. Define the type of numbering (decimal, decimal-leading-zero, upper-roman, lower-roman, upper-latin, lower-latin, upper-alpha, lower-alpha, lower-greek, armenian or georgian) or a different marker (disc, circle, or square).

Browser support

Chrome

1+

Edge

12+

Firefox

1+

IE

8+

Opera

All

Safari

3+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

All

Safari

1+