CSS counter-set Property

Description

The CSS counter-set property is used to set the value of a CSS counter. Counters are like variables that can be used to track different things, such as the number of headings in a document, the number of items in a list, or even the current year. The counter-set property takes two arguments: the name of the counter and the value to set it to. The counter name can be any valid CSS identifier. The value can be any integer, including negative numbers. If the counter does not already exist, the counter-set property will create it. If the counter already exists, the counter-set property will set its value to the specified value.

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

<h2>Chapter title</h2> 
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
<h2>Chapter title</h2>
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
<h2>Chapter title</h2>
<h3>Article</h3>
<h3>Article</h3>
<h3>Article</h3>
body {
   counter-reset: counter1; 
   line-height: .3em;
}
h2 {
   counter-reset: counter2; 
 }
h2::before { 
   counter-increment: counter1;
   content: "Chapter No. " counter(counter1) ". "; 
   counter-set: counter1 5
}
h3 {
   margin-left: 20px; 
}
h3::before { 
   counter-increment: counter2;
   content: counter(counter1) "."  counter(counter2) " " ; 
}

Browser Support

The following table will show you the current browser support for the CSS counter-set property.

Desktop
Edge Chrome Firefox Opera Safari
85856871x
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
856860x1485

Last updated by CSSPortal on: 1st January 2024