CSS counter-reset property
CSS counter-reset Property
Description
The counter-reset property sets a named counter to a specific value
Possible Values
- name – The name of the counter. The name can be any string value.
-
integer – Defines an increment for the named counter each time the element appears in the document. This increment can be zero or even a negative number. If no integer is provided, the counter is incremented by 1.
-
none – No increment is performed.
Applies to
All HTML elements.
DOM Syntax
object.style.counterReset = "section 1";
Example
This example demonstrates how to number sections like “Chapter 1,” “1.1,” “1.2,” and so on.
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style> </head>
<body>
<h1> geek-docs.com</h1>
<h2> geek-docs.com</h2>
<h2> geek-docs.com</h2>
<h2> geek-docs.com</h2>
<h2> geek-docs.com</h2>
</body>
</html>
It will produce the following result −
The ‘counter-reset’ property follows the cascade. Therefore, due to the cascade, the following stylesheet will only reset ‘imagenum’ −
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
To reset both counters, they must be specified together –
h1 { counter-reset: section -1 imagenum 99 }