Habilelabs-Logo
Blog

CSS Counters to Create Automatic Numbering in List

June 17th, 2017 . 3 minutes read
Blog featured image

In this post, we will describe how to create automatic numbering in the list with css counters. CSS Counters property works like variables and very useful for every developer. Let’s understand “Counters” property of css, then we will see an example of Creating Automatic Numbering with css counters. It also plays an important role in design and web based developments.

Properties of css counters:

  • counter-reset – The counter-reset property creates or resets one or more counters.
  • counter-increment – The counter-increment property is used to increment one or more counter values.
  • content – The content property use inserts generated content
  • counter() or counters() function – Adds the value of a counter to an element

1) counter-reset

Basic Syntax

counter-reset:none | name-number | initial | inherit

Property of counter-reset 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.

2) counter-increment

Basic Syntax

counter-increment:none | id | initial | inherit

Property of counter-increment 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: Set this property to its default value.
  • inherit: Inherits this property from its parent element.

Ex. 1: – In this ex. I will create some any type of list with automatic numbering with css counters.
The first list starts 1 and second list sub child 1.1 and third list sub child 1.1.1.

Step:1 Write the following code in your editor and after run to see the output.

HTML

 

HTML5

 

CSS

 

CSS3

 

Scripting tutorials one

 

JavaScript 5

 

VBScript 6

 

XML

 

XSL

Step:2 Run the code on the browser and you will see the output like this.

Numbering in css counters

Nested Counters In the create ‘li’ in sub child form show and also nested in each other inside.

Step:1 Write the following code in your editor and after run to see the output.

    1. item 1

 

    1. item 2
        1. item 2.1

       

        1. item 2.2

       

        1. item 2.3
            1. item 2.3.1

           

            1. item 2.3.2

           

            1. item 2.3.3

           

           

       

        1. item 2.4

       

       

 

    1. item 3

 

    1. item 4

 

Step:2 Run the code on the browser and you will see the output like this.

Nesting css counters

It is a simple example of “CSS Automatic Numbering by Counters” ( a property of css “counters”) and also “nested counter”.

Conclusion:

Counters property is needed and useful for designing numbers in a list. Hope you enjoy the post, discuss with us if you have any query about it in the comment box.

You should know about less css variable for better style sheet design.

Share on Facebook with friends.

Author: mukesh
Share: