CSS counter-reset Property
The counter-reset property resets one or more CSS counters to a given value. This property is usually used with the content and counter-increment properties. The counter-reset property is specified by two values: none and id numbers. "None" is the default value of this property. Negative values are allowed.
| Initial Value | none |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.counterReset = "section" ; |
Syntax¶
counter-reset: none | name number | initial | inherit;Example of the counter-reset property: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2::before {
counter-increment: section;
content: "Book " counter(section) ". ";
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the counter-reset property:</p>
<button onclick="myFunction()">Try it</button>
<h2>HTML Tutorials</h2>
<h2>JavaScript Tutorials</h2>
<h2>CSS Tutorials</h2>
<script>
function myFunction() {
document.body.style.counterReset = "section";
}
</script>
</body>
</html>Example of the counter-reset property with negative value: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter -1;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Example of the counter-reset property with numbered sections and subsections: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Values¶
| Value | Description |
|---|---|
| none | Counters are not incremented. |
| name number | A name defines the name of the counter to reset. The number defines the value to reset the counter to on each occurrence of the element. Defaults to 0 if not specified. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji