The counter-increment
CSS property increases or decreases the value of a CSS counter by a given amount. The counter's value can be reset to an arbitrary number using the counter-reset
CSS property.
/* Increment "my-counter" by 1 */ counter-increment: my-counter; /* Decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* Increment "counter1" by 1, and decrement "counter2" by 4 */ counter-increment: counter1 counter2 -4; /* Do not increment/decrement anything: used to override less specific rules */ counter-increment: none; /* Global values */ counter-increment: inherit; counter-increment: initial; counter-increment: 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-increment
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 increment 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 increment.
<integer>
- The value to add to the counter. Defaults to 1 if not specified.
none
- No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.
Formal syntax
[ <custom-ident> <integer>? ]+ | none
Examples
h1 { counter-increment: chapter section 2 page; /* Increases the value of the chapter and page counters by 1, and the section counter by 2 */ }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists and Counters Module Level 3 The definition of 'counter-increment' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'counter-increment' 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 | 8.0 | 9.2 | (Yes)[1] |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? |
[1] This feature is probably implemented since Safari 3.0.