counter-increment
Quick Summary for counter-increment
The
counter-increment
CSS property increases or decreases the value of a CSS counter by a given value.
Code Usage for counter-increment
/* 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: revert; counter-increment: unset;
More Details for counter-increment
counter-increment
The counter-increment
CSS property increases or decreases the value of a CSS counter by a given value.
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: revert; counter-increment: unset;
The counter-increment
property is specified as either one of the following:
<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
[ <counter-name> <integer>? ]+ | nonewhere
<counter-name> = <custom-ident>
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 |
---|
CSS Lists and Counters Module Level 3 # increment-set |
See also
Using CSS Counterscounter-reset
counter-set
@counter-style
The counter()
and counters()
functions Last modified: Jan 29, 2022, by MDN contributors
Select your preferred language English (US)DeutschFrançais日本語Polski中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline