CSS Automatic Numbering Counter

To implement a CSS Automatic Numbering Counter, we need to understand some properties of CSS. 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

  

Property Values:

• none: Default value. No counters will be reset.
  
  
• name: The name defines which counter that 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

 

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.

<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>
<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>

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.

 

 

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

Example 2: In this example I will create the 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 3

 

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

<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>

<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>

Step 4

 

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

 

 

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