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

counter-set

Definition

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.

Examples

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;
}

Values

ValueDescription
<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
YesYesYesYesYesYes