counter-reset
Quick Summary for 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.
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:

A <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 valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

[ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none

where <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 Counters counter-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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Interesting...

Me
Random CSS Property

background-image

The background-image CSS property sets one or more background images on an element.
background-image css reference