`counter-set`

The property that controls the exact numerical value of existing CSS counters.

Time to read: less than 5 min

Briefly

With the counter-set property, you can specify a specific numerical value for a given counter.

Example

Let's set the numerical value 25 for the counter example on the element <li>:

        
          
          li {  counter-set: example 25;}
          li {
  counter-set: example 25;
}

Suppose we need to change the order of numbering of chapters in the table of contents, so that after chapter 3 comes chapter 9 immediately:

        
          
          <section class="table-of-contents">  <h1 class="title">Table of Contents</h1>  <h2 class="chapter">HTML and CSS</h2>  <h2 class="chapter">Creating Styles and Style Sheets</h2>  <h2 class="chapter">Selectors: Choosing Format Elements</h2>  <h2 class="chapter change-value">The Mechanism of Style Inheritance</h2>  <h2 class="chapter">Managing a Complex Style Structure: Cascade</h2>  <h2 class="chapter">Margins, Padding, Borders</h2></section>
          <section class="table-of-contents">
  <h1 class="title">Table of Contents</h1>
  <h2 class="chapter">HTML and CSS</h2>
  <h2 class="chapter">Creating Styles and Style Sheets</h2>
  <h2 class="chapter">Selectors: Choosing Format Elements</h2>
  <h2 class="chapter change-value">The Mechanism of Style Inheritance</h2>
  <h2 class="chapter">Managing a Complex Style Structure: Cascade</h2>
  <h2 class="chapter">Margins, Padding, Borders</h2>
</section>

On the element <section> we create a counter named chapter with an initial value of 0:

        
          
          .table-of-contents {  counter-reset: chapter 0;}
          .table-of-contents {
  counter-reset: chapter 0;
}

We increment the values of the chapter counter on the elements <h2> and set a specific numerical value for chapter 4, as well as insert the counter value chapter through the function counter():

        
          
          .chapter {  counter-increment: chapter 1;}.change-value {  counter-set: chapter 9;}.chapter::before {  content: "Chapter " counter(chapter) ": ";}
          .chapter {
  counter-increment: chapter 1;
}

.change-value {
  counter-set: chapter 9;
}

.chapter::before {
  content: "Chapter " counter(chapter) ": ";
}

Open demo in the new window

How to Understand

A property that can set an exact numerical value for a counter.

How to Write

In the value of the property, you need to specify the name of the counter and the number.

By default, the initial numerical value is 0 if otherwise not specified.

Here, the value of the counter example will be equal to 0:

        
          
          li {  counter-set: example;}
          li {
  counter-set: example;
}

To avoid changing the numerical value of the counter, you can specify the keyword none — this is the default value.

        
          
          li {  counter-set: none;}
          li {
  counter-set: none;
}

Arguments

Creating new counters can not only be done by the counter-reset property. Imagine a situation where you applied only the counter-set property to an element and specified in its value the name of a non-existent counter.

        
          
          li {  counter-set: new 2;}
          li {
  counter-set: new 2;
}

In this case, a new counter named new will be created on the <li> element with an initial value of 0. After creating the counter, the counter-set property begins to act as usual.

Counter names are case-sensitive. For example, the values example and EXAMPLE are two different, unrelated counters.

Keywords: none, initial, inherit, unset, default cannot be used as counter names.

In the value of the property, you can specify 1 or more counters. They are specified in order, separated by spaces.

        
          
          li {  counter-set: count1 -1 count2 99;}
          li {
  counter-set: count1 -1 count2 99;
}