In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > counterReset

counterReset style property

Browser support:

8

Sets or retrieves the list of counters and their initial values.

The value of this property is a space-delimited list of identifier-value pairs, where identifier is the name of a counter, and value is the initial value. The value is optional, its default value is 0.

You can define more than one identifier-value pair; in that case all counters specified with the identifiers will be defined/reset at every occurrence of the element.
This property is useful if you want to generate the numbering with names like the header numbering mechanism in Microsoft Word. Use it together with the content and the counterIncrement properties to create automatic numbering.

Note: The counterReset property is supported in Internet Explorer from version 8.

This property doesn't take any effect if you change it dynamically in Safari before version 5.

Syntax:

object.counterReset;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: counter-reset

Possible values:

The type of this property is string.

One of the following values:

•

This value can be used arbitrary times (use the space character to separate them)

•

Values in this order (use the space character to separate them):

counter name

initial value (integer)

possible but not necessary; left to personal choice

•

none

•

inherit

Description of values:

counter name

String, the name of the counter.

inherit

Takes the value of this property from the computed style of the parent element.

initial value (integer)

Integer,the initial value of the counter. The default value is 0.

none

Use automatic numbering.

Default: none.

Example HTML code 1:

This example illustrates the use of the counter-reset property:

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the counterReset property in JavaScript:

<head>
    <style>
        body {
            counter-reset: chapter;      /* set chapter counter to 0*/
        }
        .chapter:before {
            content: counter(chapter) ". ";
            display: inline;
        }
        .chapter {
            counter-increment: chapter;
            /* increment chapter counter by 1, same as counter-increment: chapter 1;*/

            counter-reset: section;      /* set section counter to 0*/
            font-size: 20px;
            font-weight: bold;
        }
        .section:before {
            content: counter(chapter) "." counter(section) ".";
            display: inline;
        }
        .section {
            counter-increment: section;
            /* increment section counter by 1, same as counter-increment: section 1;*/

            font-size: 15px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
    <script type="text/javascript">
        function ResetSectionCounter () {
            var section = document.getElementById ("sec1.2");

            if ('counterReset' in section.style) {
                section.style.counterReset = "section";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>

<body>
    <div class="chapter">First chapter</div>
    <div class="section">First section in Chapter 1</div>
    <div id="sec1.2" class="section">Second section in Chapter 1</div>
    <div class="section">Third section in Chapter 1</div>
    <div class="section">Fourth section in Chapter 1</div>
    <div class="chapter">Second chapter</div>
    <div class="section">First section in Chapter 2</div>
    <div class="section">Second section in Chapter 2</div>

    <br />
    <button onclick="ResetSectionCounter ();">Reset section counter</button>
    Click on the button to reset the section counter at the 'Second section in Chapter 1' element.
</body>