CSS Portal

CSS counter-set Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

Forward
Introduction 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

<div class='container'>
<h2>Using counter-set</h2>

<div class='items'>
<div class='item'>First item</div>
<div class='item'>Second item</div>
<div class='item set-start'>Start at 10</div>
<div class='item'>Next item</div>
</div>

<p class='note'>The third item uses <code>counter-set</code> to restart the sequence at 10.</p>
</div>
:root {
    --accent: #2b7a78;
    --muted: #666;
}

.container {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    max-width: 680px;
    margin: 32px auto;
    padding: 18px;
}

.items {
    /* initialize the counter named 'item' to 0 */
    counter-reset: item;
}

.item {
    /* increment the counter for each .item element */
    counter-increment: item;
    position: relative;
    padding: 12px 14px 12px 44px;
    margin: 10px 0;
    background: #f7fff7;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
}

.item::before {
    /* display the current counter value */
    content: counter(item) '. ';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--accent);
}

.item.set-start {
    /* set the counter named 'item' to 9 on this element
       so its own increment yields 10 */
    counter-set: item 9;
    background: #fff4e6;
    border-color: #ff8c42;
}

.note {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 12px;
}

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
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!