The counter-reset
CSS property resets a CSS counter to a given value. The counter's value can increased or decreased using the counter-increment
CSS property.
/* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none; /* Global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset;
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | all |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The counter-reset
property is specified as either one of the following:
- A
<custom-ident>
naming the counter, followed optionally by an<integer>
. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space. - The keyword value
none
.
Values
<custom-ident>
- The name of the counter to reset.
<integer>
- The value to reset the counter to on each occurrence of the element. Defaults to
0
if not specified. none
- No counter reset is to be performed. This can be used to override a
counter-reset
defined in a less specific rule.
Formal syntax
[ <custom-ident> <integer>? ]+ | none
Examples
h1 { counter-reset: chapter section 1 page; /* Sets the chapter and page counters to 0, and the section counter to 1 */ }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists and Counters Module Level 3 The definition of 'counter-reset' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'counter-reset' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 2.0 | (Yes) | 1.0[1] | 8.0 | 9.2 | 3.1[1] |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 25.0[1] | 10[1] | 10.0 | 3.2 |
[1] The compatibility info may not be correct.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
wbamberg,
erikadoyle,
Sebastianz,
fscholz,
jsx,
teoli,
alberts+,
kscarfone,
Sheppy,
JohnMcLear,
ethertank,
hydrurga,
grendel,
BijuGC,
DBaron,
Fredchat,
Ptak82,
Spanglerco
Last updated by:
mfluehr,