counter-set
Quick Summary for counter-set
The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.
Code Usage for counter-set
/* Set "my-counter" to 0 */ counter-set: my-counter;  /* Set "my-counter" to -1 */ counter-set: my-counter -1;  /* Set "counter1" to 1, and "counter2" to 4 */ counter-set: counter1 1 counter2 4;  /* Cancel any counter that could have been set in less specific rules */ counter-set: none;  /* Global values */ counter-set: inherit; counter-set: initial; counter-set: revert; counter-set: unset; 
More Details for counter-set

counter-set

The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.

Note: The counter's value can be incremented or decremented using the counter-increment CSS property.

Syntax

/* Set "my-counter" to 0 */ counter-set: my-counter;  /* Set "my-counter" to -1 */ counter-set: my-counter -1;  /* Set "counter1" to 1, and "counter2" to 4 */ counter-set: counter1 1 counter2 4;  /* Cancel any counter that could have been set in less specific rules */ counter-set: none;  /* Global values */ counter-set: inherit; counter-set: initial; counter-set: revert; counter-set: unset; 

The counter-set 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 reset 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 set.

<integer>

The value to set the counter to on each occurrence of the element. Defaults to 0 if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

none

No counter set is to be performed. This can be used to override a counter-set defined in a less specific rule.

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

Setting named counters

h1 {   counter-set: chapter section 1 page;   /* Sets the chapter and page counters to 0,      and the section counter to 1 */ } 

Specifications

Specification
CSS Lists and Counters Module Level 3 # propdef-counter-set

See also

Using CSS Counters counter-increment counter-reset @counter-style counter() and counters() functions content property

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
Be Yourself, Back Yourself
Kristie Bennett, Survivor
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