CSS - counter-reset
The counter-reset
CSS property is used to reset CSS Counters to a given value.
Example
CSS
Copy Code
h1 { counter-reset: chapter section 1 page; /* Sets the chapter and page counters to 0 and the section counter to 1. */ }
Syntax
CSS
Copy Code
/* Set counter-name to 0 */ counter-reset: counter-name; /* Set counter-name to -1 */ counter-reset: counter-name -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;
Values
<custom-ident>
- The name of the counter to increment. This identifier is composed by a combination of case-insensitive letters
a
toz
, numbers0
to9
, underscores (_
), and/or dashes (-
). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can't benone
,unset
,initial
, orinherit
in any combination of cases. <integer>
- The value to reset the counter to on each occurrence of the element. Defaults to
0
if not given. none
- Is a keyword indicating that no counter reset is to be performed. It can be used to hide
counter-reset
defined in less specific rules.
You may specify as many counters to reset as you want, each separated by a space.
Formal syntax
CSS
Copy Code
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a><custom-ident> <a href="css/integer" title=""><integer></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none
Description
The counter-reset
CSS property is used to reset CSS Counters to a given value.
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | all |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 2.0 | 1.0[1] | 8.0 | 9.2 | 3.1[1] |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 25.0[1] | 10[1] | 10.0 | 3.2 |
[1] The compatibility info may not be correct.
See Also
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/counter-reset