CSS counter-reset Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

This is paragraph

CSS counter-reset Property

CSS counter-reset property resets a CSS counter to a given value.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* Set "myCounter" to 0 */ counter-reset: myCounter; } p::before{ counter-increment: myCounter; content: "Paragraph " counter(myCounter) ": "; font-weight: bold; font-size: 17px; } </style> </head> <body> <h1>CSS counter-reset Property</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> </body> </html>

Run

Syntax

Using CSS

element{ counter-reset: myCounter; }

Using Javascript

object.style.counterReset="myCounter";

Animatable

No, counter-reset property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS counter-reset property is none.

Property Value

The following table provides a list of values for CSS counter-reset property.

Value	Explanation
none	Specifies that no counters will be reset.
custom id	Specifies the custom counter to reset.

Using JavaScript

In the following example, we will demonstrate how to set the CSS counter-reset property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p::before{ counter-increment: myCounter; content: "Paragraph " counter(myCounter) ": "; font-weight: bold; font-size: 17px; } </style> </head> <body> <h1>CSS counter-reset Property</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("body")[0]; function myFunction(){ x.style.counterReset = "myCounter"; } </script> </body> </html>

Run