CSS Automatic Numbering Counter

Introduction

To implement a CSS Automatic Numbering Counter, we need to understand some CSS properties. Let's understand the properties and then we will see an example of a CSS Automatic Numbering Counter.

The counter-reset and counter-increment properties create numbered sections with subsections.

counter-reset

The counter-reset property creates or resets one or more counters.

Basic Syntax

Counter-reset

Property Values

none: Default value. No counters will be reset.
name: The name defines which counter should be reset.
number: The number sets the value the counter is set to on each occurrence of the selector, the default reset value is 0.
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

counter-increment

The counter-increment property is used to increment one or more counter-values.

Basic Syntax

Counter-increment

Property Values

none: Default value. No counters will be incremented.
id: The id defines which counter that should be incremented.
number: The number sets how much the counter will increment on each occurrence of the selector, the default increment is 1. 0.
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

Example 1. In this example, I will create the list of .NET tools using a CSS Automatic Numbering Counter. By this, we can create any type of list with automatic numbering.

The first list would start at 1 and count up (2, and so on)
The second list would start at 1.1 and count up (1.2 and so on)

Step 1. Open any text editor and write the following code and by run it to see the output.

HTML Code

<h1>.NET Tools</h1>
<h2>Navigation Tools</h2>
<p>Pointer</p>
<p>Menu</p>
<p>TreeView</p>

<h2>Data Tools</h2>
<p>Form View</p>
<p>Grid View</p>
<p>List View</p>
<p>Chart</p>

<h2>Standard Tools</h2>
<p>Button</p>
<p>CheckBox</p>
<p>FileUpload</p>
<p>Label</p>

CSS Code

<style type="text/css">
    h1 { 
        counter-reset: section;   
        color: #636;  
    }
    h2 { 
        counter-reset: subsection;  
        color: #F30;  
    }
    h2::before {  
        content: counter(section) ". ";  
        counter-increment: section;  
    }
    p {  
        color: #060;  
    }
    p::before {  
        content: counter(section) "." counter(subsection) " ";  
        counter-increment: subsection;  
    }
</style>

Step 2. I will save this file with the name CSS_AutomaticNumbering.html and run it in the Chrome browser. We will see output like this.

Navigation Tools

Nested Counters

It is used where lists can be nested inside each other.

Example 2. In this example, I will create a list of Items using CSS Nested Counters. By this, we can create any type of list of items with automatic numbering.

The first nested list will start at 1.1 and count up (1.2, 1.3 and so on)
The second nested list would start at 1.1.1 and count up (1.1.2 and so on)

In this example, I reset the counter on the <ol> element.

Step 1. Open any text editor or write the following code and by running it we will see the output.

HTML Code

<ol>  
    <li>Item 1  
        <ol>  
            <li>Sub item 1  
                <ol>  
                    <li>Sub-sub item 1</li>  
                    <li>Sub-sub item 2</li>  
                    <li>Sub-sub item 3</li>  
                </ol>  
            </li>  
            <li>Sub item 2</li>  
        </ol>  
    </li>  
    <li>Item 2</li>  
</ol>

CSS Code

<style type="text/css">
    ol {  
        counter-reset: section;  
        list-style-type: none;  
        font-size: 20px;  
        color: #903;  
    }  
    ol li {  
        counter-increment: section;  
    }  
    ol li:before {  
        content: counters(section, '.') '. ';  
    }  
</style>

Step 2. I will save this file with the name nested.html and run it in the Chrome browser. We will see output like this.

Chrome browser

It is a simple example of a CSS Automatic Numbering Counter and Nested Counter. Happy coding. Thank you.