The counter-increment
CSS property increases or decreases the value of a CSS counter by a given value.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note: The counter's value can be reset to an arbitrary number using the counter-reset
CSS property.
Syntax
/* 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;
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 definition
Initial value | none
|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
[ <custom-ident> <integer>? ]+ | none
Examples
Incrementing named counters
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 Module Level 3The 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
counter-increment
|
Chrome
Full support 2 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 8 |
Opera
Full support 9.2 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 25 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
- Using CSS Counters
counter-reset
counter-set
@counter-style
- The
counter()
andcounters()
functions
counter-increment by Mozilla Contributors is licensed under CC-BY-SA 2.5.