CSS counter-reset Property

Last Updated : 02 Jun, 2023

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>                     