CSS Property counter-reset








counter-reset resets the counter. If no <integer> is supplied, it defaults to 0.

Summary

ItemValue
Initial value none
Inherited No.
Version CSS2
JavaScript syntax object.style.counterReset="subsection"
Applies to All elements.




CSS Syntax

counter-reset: counter-name1 [integer] ... counter-nameN [integer] | 
               none |  
               inherit 

Property Values

The property values are listed in the following table.

Value Description
none No counters will be reset. Default value
id number The id selects which counter to reset and number sets the value. The default reset value is 0
inherit Inherit the counter-reset property from the parent element




Browser compatibility

counter-reset Yes 8.0 Yes Yes Yes

Example

An example showing how to use counter-reset CSS property.

<!DOCTYPE HTML>
<html>
<head>
    <style>
        p:before {<!--from www  . j a v  a  2 s  .  com-->
          content: counter(paragraphNumber, upper-roman) ": ";
        }
        
        h1 {
          counter-reset: paragraphNumber;
        }
        
        p {
          counter-increment: paragraphNumber;
        }
    </style>
</head>
<body>
    <h1>Heading One</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Two</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Three</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
</body>
</html>

Click to view the demo