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:

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

Formal syntax

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

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
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
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown
Random CSS Property

border-top-right-radius

The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
border-top-right-radius css reference