CSS Property counter-reset
counter-reset resets the counter.
If no <integer> is supplied, it defaults to 0.
Summary
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.counterReset="subsection" |
| Applies to | All elements. |
CSS Syntax
counter-reset: counter-name1 [integer] ... counter-nameN [integer] |
none |
inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| none | No counters will be reset. Default value |
| id number | The id selects which counter to reset and number sets the value. The default reset value is 0 |
| inherit | Inherit the counter-reset property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
counter-reset |
Yes | 8.0 | Yes | Yes | Yes |
Example
An example showing how to use counter-reset CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p:before {<!--from www . j a v a 2 s . com-->
content: counter(paragraphNumber, upper-roman) ": ";
}
h1 {
counter-reset: paragraphNumber;
}
p {
counter-increment: paragraphNumber;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Two</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Three</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
</body>
</html>