Counter Reset Property
Last updated: 2026-09-13
counter-reset Counter Reset Property
counter-reset creates a new CSS counter and initializes it to the given value (0 by default). It is the first step of automatic numbering and is usually set on a parent element. Combined with counter-increment and content's counter() function, it can produce complex multi-level numbering systems.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
counter-reset: none | <counter-name> <integer>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | Do not reset |
<counter-name> <integer>? | Value | Counter name and initial value |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| counter-reset | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： counter-reset is typically set on the parent of a numbered list; each parent creates an independent counter scope.
❓ FAQ
QCan counter-reset reset an existing counter?
AYes. counter-reset sets the named counter to the given value (0 by default). In nested structures, every element that declares counter-reset creates a new counter instance that shadows the parent's value, giving each section independent numbering. If you skip the reset, numbering continues from the parent scope.
QHow do I make numbering start at 10?
AUse counter-reset: myCounter 9; to set the initial value to 9, then counter-increment: myCounter increments by 1 each time, so the first element outputs 10. The initial value plus one is what the first element shows, because the increment runs before the output — an easy 'off by one' detail to miss.
QWhich runs first, counter-reset or counter-increment?
AOn the same element, the spec says counter-increment is processed before counter-reset. In practice they rarely share an element: the parent resets to initialize, children increment, and content outputs the value. Knowing the processing order helps you avoid counters drifting from what you expect in nested structures.
QWhat does counter-reset: none do?
Anone means reset no counters, so counters keep the current value from the parent scope — useful when you want numbering to continue across elements. Because declaring counter-reset on an element normally creates a new instance (effectively zeroing it), writing none explicitly says 'don't reset', letting several blocks number consecutively.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
