CSS counter-set Property

❮ Previous Reference Next ❯

Example

h2 {
  counter-increment: chapter-count;
  font-size: 16px;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

h1 {
  counter-set: chapter-count;
}
Try this code ❯

Meaning:

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.

Default value:none
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.counterSet="id|integer|none|initial|inherit|revert|revert-layer|unset";


Standard Syntax

counter-set: id|integer|none|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
id 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.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  counter-set: none;
}
❮ Previous Reference Next ❯