CSS counter-set attribute

Previous page counter-reset
Next page @counter-style

Definition and Usage

counter-set Property is used to create and set the CSS counter to a specific value.

counter-set Properties are usually used with the 'counter-increment' property and the 'content' property.

Instance

Example 1

Create a counter ('my-counter'), set it to 5, and increase it by 1 each time the <h2> selector appears:

body {
  /* Set 'my-counter' to 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Increase "my-counter" by 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Try it yourself

Example 2

Create a counter ('my-counter'), set it to 5, and decrease it by 1 each time the <h2> selector appears:

body {
  /* Set 'my-counter' to 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Decrease 'my-counter' by 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Try it yourself

Example 3

Use the formats 'Section 10:', '10.1', '10.2', etc. for chapter and sub-chapter numbering:

body {
  /* Set 'section' to 9 */
  counter-set: section 9;
}
h1 {
  /* Set "subsection" to 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Increase "section" by 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Increase "subsection" by 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Try it yourself

Example 4

Create a counter, set it to 9, and increase it by 1 each time the <h2> selector appears (using Roman numerals):

body {
  /* Set "my-counter" to 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Increase "my-counter" by 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Try it yourself

CSS syntax

counter-set: none|counter-name number|initial|inherit;

Attribute value

Value	Description
none	Default value. No counter is set.
counter-name number	The counter name to be set and its value. The counter is set to this value each time the selector appears. The default value is 0.
initial	Set this property to its default value. Refer to initial.
inherit	Inherit this property from its parent element. Refer to inherit.

Default value:	none
Inheritance:	No
Animation creation:	Not supported. Refer to:Animation-related properties.
Version:	CSS2
JavaScript syntax:	object.style.counterSet="4"