CSS Property counter-reset

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


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 |  

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


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

        p:before {<!--from www  . j a v  a  2 s  .  com-->
          content: counter(paragraphNumber, upper-roman) ": ";
        h1 {
          counter-reset: paragraphNumber;
        p {
          counter-increment: paragraphNumber;
    <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>

Click to view the demo