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

counter-reset property

Browser support:
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): 
1. counter name
initial value (integer) possible but not necessary; left to personal choice

Description of values:

counter name
String, the name of the counter.
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.
Use automatic numbering.
Default: none.

Example HTML code 1:

This example illustrates the use of the counter-reset property:
        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;

    <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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content