CSS counter-set Property

What You’ll Learn

The counter-set property assigns a CSS counter to a specific value — the fine-grained control between counter-reset and counter-increment.

Introduction

The counter-set property in CSS is used to initialize or reset a counter to a specific value. Counters in CSS are useful for numbering elements, such as lists, sections, and other content that requires ordered numbering.

This property allows you to control the starting point or change the count within a document without necessarily creating a new nested counter scope the way counter-reset does.

Definition and Usage

Apply counter-set on an element when an existing counter should jump to a known value. Pair it with counter-reset (to create the counter), counter-increment (to advance numbering), and content: counter(name) (to display the value).

📝 Syntax

The syntax for the counter-set property is straightforward. It takes one or more counter names and optional integer values.

element {
  counter-set: counter-name value;
}

Here, counter-name is the name of the counter to be set, and value is an optional integer that specifies the new value for the counter. If value is not specified, the counter is set to 0.

Basic Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

.reset-counter {
  counter-set: section 0;
}

Default Value

The default (initial) value of the counter-set property is none, meaning no counter value is changed.

Syntax Rules

• The initial value is none — no counter is set.
• Omitting the number sets the counter to 0.
• Set multiple counters: counter-set: chapter 2 section 3;.
• The counter must already exist (usually via counter-reset or prior increment).
• Remember that counter-increment runs after the set value on the same element.

💎 Property Values

The counter-set property accepts counter names, optional integer values, and none.

The CSS Counter System

Examples Gallery

In these examples, we use counter-set to initialize or change counters for sections, steps, figures, and outline numbering.

<style>
  body { counter-reset: section; }
  h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
  .reset-counter { counter-set: section 0; }
</style>

<h2>Introduction</h2>
<h2>Details</h2>
<div class="reset-counter">
  <h2>Reset Section</h2>
</div>
<h2>Conclusion</h2>

.steps li.jump {
  counter-set: step 10;
  counter-increment: none;
}

.note {
  counter-set: figure 2;
}

.appendix {
  counter-set: chapter 3 section 2;
}

💡 Best Practices