1. css
  2. /properties
  3. /counter-set



The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.


Reset a counter with ID section-counter to value 0:

body {
  counter-reset: section-counter 0;

Reset multiple counters with IDs section-counter and list-item-counter to values 0 and 5, respectively:

body {
  counter-reset: section-counter 0 list-item-counter 5;

Reset all counters to their initial value:

body {
  counter-reset: inherit;


<integer>The initial value of the counter.
inheritInherits the value of the parent element.

Best Practices

  • Use descriptive counter IDs, e.g. section-counter and list-item-counter, to keep track of different counters in your stylesheet.
  • Reset counters only when necessary, as it can affect the styling of other elements that use the same counter.
  • Avoid using negative values for counters, as it can cause unexpected results.
  • Always reset the counter value in a parent element, as it will be inherited by its children.
  • Use the counter-increment property to increment the value of the counter.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera