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.
  1. <style type="text/css">  
  2. h1 { counter-reset: section;   
  3.    color:#636;  
  4. }  
  5. h2 { counter-reset: subsection;  
  6.      color:#F30;  
  7.  }  
  8. h2::before {  
  9.     content: counter(section) ". ";  
  10.     counter-increment: section;  
  11. }  
  12. P{  
  13.     color:#060;  
  14. }  
  15. p::before {  
  16.     content: counter(section) "." counter(subsection) " ";  
  17.     counter-increment: subsection;  
  18. }  
  19. </style>  
  20. <h1>.NET Tools</h1>  
  21. <h2>Navigation Tools</h2>  
  22. <p>Pointer</p>  
  23. <p>Menu</p>  
  24. <p>TreeView</p>  
  25. <h2>Data Tools</h2>  
  26. <p>Form View</p>  
  27. <p>Grid View</p>  
  28. <p>List View</p>  
  29. <p>Chart</p>  
  30. <h2>Standard Tools</h2>  
  31. <p>Button</p>  
  32. <p>CheckBox</p>  
  33. <p>FileUpload</p>  
  34. <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.
  1. <style type="text/css">  
  2. ol {  
  3.     counter-reset:section;  
  4.     list-style-type:none;  
  5.     font-size:20px;  
  6.     color:#903;  
  7.     }  
  8. ol li {  
  9.     counter-increment:section;  
  10.     }  
  11. ol li:before {  
  12.     content:counters(section, '.') '. ';  
  13.     }  
  14.   
  15. </style>  
  16.   
  17. <ol>  
  18.     <li>Item 1  
  19.     <ol>  
  20.         <li>Sub item 1  
  21.         <ol>  
  22.             <li>Sub-sub item 1</li>  
  23.             <li>Sub-sub item 2</li>  
  24.             <li>Sub-sub item 3</li>  
  25.         </ol>  
  26.         </li>  
  27.         <li>Sub item 2</li>  
  28.      </ol>  
  29.     </li>  
  30.     <li>Item 2</li>  
  31. </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.