counter-set

counter-set updates the value of an existing named CSS counter. If the counter does not exist, it creates one; use counter-reset when you intend to create an explicit scope.

Change the sequence midstream

The first paragraph increments to 1. The second increments, then counter-set changes the value to 7. The third continues at 8 because it uses that same counter.

<div class="group">
  <p>Normal start</p>
  <p class="jump">Set to seven</p>
  <p>Continue from seven</p>
</div>

.group {
  counter-reset: demo;
}
.group p {
  counter-increment: demo;
}
.group .jump {
  counter-set: demo 7;
}
.group p::before {
  content: counter(demo) " — ";
}

Set without adding an increment

The first paragraph displays zero. The setter changes the existing counter to 4; the following paragraph still displays 4 because no increment rule is present.

<div class="group">
  <p>Initial value</p>
  <p class="set">Set value</p>
  <p>Same value afterward</p>
</div>

.group {
  counter-reset: demo;
}
.set {
  counter-set: demo 4;
}
.group p::before {
  content: counter(demo) " — ";
}

Values and defaults

The initial value is none and the property is not inherited. Use one or more counter names with optional integer values; an omitted value sets zero. Pairs are separated by spaces. None performs no set operation. On the same element, counter creation/reset occurs before incrementing and setting; setting therefore determines the final value shown here.

Common mistakes

Counter-set is not a label for a completed task and does not provide a status announcement. A reset may create a nested scope with different later behavior; a set mutates the active counter. Do not use CSS-only counters for essential numbering without a semantic alternative. This property has a newer compatibility history than ordinary counter-reset/increment, so check its own table.

Learn counter-reset, counter-increment, and content.

Sources and browser support

MDN: counter-set describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.