CSS counter-set Property
Description
The counter-set property gives authors direct, explicit control over named counters by assigning one or more counters a specific baseline value on a particular element. When you apply it, you establish or change the stored value for the named counter(s) at that point in the document tree; subsequent descendants will see and build on that value unless it is changed again further down the tree. This makes counter-set ideal for situations where you need deterministic numbering that doesn't depend purely on automatic increments — for example, when resuming numbering after an interruption or when establishing a starting point for a custom sequence.
Unlike automatic adjustments, counter-set is used to place counters at an exact value rather than simply incrementing or resetting them to a default state. It complements properties that manage counters in other ways: see counter-reset for declaring fresh counters or resetting them to their initial condition, and counter-increment for advancing a counter as the flow progresses. Together these controls let you mix automatic sequencing with manual overrides — for instance, you can establish a starting point with counter-set, let the document advance counters with increments, and occasionally reset with explicit resets.
Counters set by counter-set are typically surfaced to users via generated content in pseudo-elements or other content-generation mechanisms. To render the counter value into the page layout you usually pair the counter with mechanisms that insert generated text into the document flow; see content for how generated content picks up and displays counter values. Because the counter’s value is part of the element tree state rather than plain inheritance, changing it at one element creates a new baseline for that element’s subtree without globally affecting unrelated branches.
Practical uses include nonstandard numbering schemes (such as combining multiple counters for chapter/section/subsection formats), manual control over list numbering when combining lists from different sources, and resuming or synchronizing numbering across document fragments or paginated sections. Keep in mind that stacking multiple applications of counter-related properties allows fine-grained control — you can set explicit values where needed, allow automatic increments elsewhere, and reset contexts when a new structural boundary is required.
Definition
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.counterSet
Interactive Demo
Learning CSS
ForwardIntroduction to CSS
Color
Text
The Box Model
Lists
Syntax
counter-set: [ <custom-ident><integer>? ]+ | none
Values
- noneThis element does not alter the value of any counters.
- <custom-ident><integer>?The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates 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).
Example
Browser Support
The following information will show you the current browser support for the CSS counter-set property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported in some modern browsers, but not all.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
