Skip to content
Related Articles

Related Articles

CSS | counter-reset Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jul, 2022

The counter-reset property in CSS is used to create or reset the CSS counter for elements. This property works together with counter-increment property and the content property.

Syntax:  

counter-reset = none|name number|initial|inherit;

Default Value: 

  • none 

Property Values: 
 

  • none: It is the default value. This value does not reset the counter.
  • name number: The value to reset the counter on each occurrence of the element. The default value is 0 if not specified.
  • initial: It sets the counter-reset property to its default value.
  • inherit: The element inherits the property from its parent element.

Example 1: This example use counter-reset property to create section. 
 

html




<!DOCTYPE html>
<html>
     
<head>
     
    <!-- CSS property to set counter-reset property -->
    <style>
         
        /* set chapter counter to 0*/
        body {
            counter-reset: chapter;    
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
             
            /* Increment the chapter counter by 1,
            same as counter-increment: chapter 1; */
            counter-increment: chapter;
             
            /* set section counter to 0 */
            counter-reset: section;    
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <div class = "chapter">HTML</div>
    <div class = "chapter">CSS</div>
    <div class = "chapter">PHP</div>
</body>                   
 
</html>

Output: 
 

Example 2: This example use counter-reset property to create section and subsection. 
 

html




<!DOCTYPE html>
<html>
     
<head>
     
    <!-- CSS style to create counter-reset property -->
    <style>
        body {
            counter-reset: section;
        }
        h1 {
            counter-reset: category;
        }
        h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
        }
        h3:before {
            counter-increment: category;
            content: counter(section) "." counter(category) " ";
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h3>HTML</h3>
    <h3>CSS </h3>
     
    <h1>References</h1>
     
    <h3>HTML Tags</h3>
    <h3>CSS Properties</h3>
</body>
 
</html>                   

Output: 
 

Supported Browsers: The browser supported by counter-reset property are listed below: 
 

  • Google Chrome 2.0
  • Edge 12.0
  • Internet Explorer 8.0
  • Firefox 1.0
  • Safari 3.0
  • Opera 9.2

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!