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

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