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

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

counter-increment property

Browser support:

8

Specifies the list of counters and increment 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 defines how much the counter will be incremented by. The value is optional, its default value is 1.

You can define more than one identifier-value pair; in that case all counters specified with the identifiers will be modified 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-reset properties to create automatic numbering.

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

JavaScript page for this property: counterIncrement. 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

increment value (integer)

possible but not necessary; left to personal choice

•

none

•

inherit

Description of values:

counter name

String, the name of the counter.

increment value (integer)

Integer, the increment of the counter. If not specified, the increment value is 1.

inherit

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

none

Names of counters are not displayed.

Default: none.

Example HTML code 1:

This example illustrates the use of the counter-increment 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>