Copyright © tutorialspoint.com

CSS - counter-reset

previous next


Description:

The counter-reset property sets a named counter to a specific value.

Possible Values:

Applies to:

All the HTML elements.

DOM Syntax:

object.style.counterReset="section 1";

Example:

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

h1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet will only reset 'imagenum':

h1 { counter-reset: section -1 } h1 { counter-reset: imagenum 99 }

To reset both counters, they have to be specified together:

h1 { counter-reset: section -1 imagenum 99 }

previous next

Copyright © tutorialspoint.com