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

You are here: Reference > CSS > properties > counter-reset

counter-reset property

Browser support:

8

Sets 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 counter-increment properties to create automatic numbering.

Note: The counter-reset property is supported in Internet Explorer from version 8.

JavaScript page for this property: counterReset. You can find other example(s) there.

Possible values:

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>