counter-reset
Quick Summary for counter-reset
counter-reset
CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element.
Code Usage for counter-reset
/* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -3 */ counter-reset: my-counter -3; /* Set reversed "my-counter" to "the number of peer elements" */ counter-reset: reversed(my-counter); /* Set reversed "my-counter" to -1 */ counter-reset: reversed(my-counter) -1; /* Set counter2 to 9 and reversed "counter1" and "counter3" to 1 and 4, respectively*/ counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 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: revert; counter-reset: unset;
More Details for counter-reset
counter-reset
The counter-reset
CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element.
Normal counters have a default initial value of 0. Reversed counters are intended to count down, and have a default initial value set to the number of elements at the current level. The default initial values make it easy to implement the two most common numbering patterns: counting up from one to the number of elements, and counting down from the number of elements to one.
A counter's value is increased or decreased using the counter-increment
CSS property, and the value of an existing counter may be set using counter-set
.
In addition to author-created counters, the property can also reset the list-item
counters used by ordered lists (as created using <ol>
elements). These have the same behavior as author-created counters, except they are automatically incremented/decremented by one with each list element. This behavior can be overridden using counter-increment
.
Syntax
/* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -3 */ counter-reset: my-counter -3; /* Set reversed "my-counter" to "the number of peer elements" */ counter-reset: reversed(my-counter); /* Set reversed "my-counter" to -1 */ counter-reset: reversed(my-counter) -1; /* Set counter2 to 9 and reversed "counter1" and "counter3" to 1 and 4, respectively*/ counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 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: revert; counter-reset: unset;
The counter-reset
property is specified as either one of the following:
<custom-ident>
or a reversed(<custom-ident>)
naming the counter, followed optionally by an <integer>
. Note that the reversed()
method is used to create a "reversed" counter. You may specify as many counters and reversed counters to reset as you want, with each counter or counter-number pair separated by a space. The keyword value none
. The "implicit" counter named list-item
can be used to control the numbering for ordered lists, as created using <ol>
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 definition
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | nonewhere <counter-name> = <custom-ident>
Examples
The following examples show how to reset the counters, but not how they are incremented, decremented, and displayed.
For more-complete examples see Using CSS Counters.
Resetting named counters
h1 { counter-reset: chapter section 1 page; /* Sets the chapter and page counters to 0, and the section counter to 1 */ }
Reversing a counter
h1 { counter-reset: reversed(chapter) reversed(section) 1 page; /* Sets the reversed flag on the chapter and section counters. Sets the chapter to the number of elements, the section counter to 1, and the page counters to 0*/ }
Specifications
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-reset |
See also
Using CSS Counterscounter-increment
counter-set
@counter-style
counter()
and counters()
functions content
property Last modified: Jan 28, 2022, by MDN contributors
Select your preferred language English (US)DeutschFrançais日本語Polski中文 (简体) Change language