CSS counter-set Property

Description

The counter-set property manipulate the value of existing counters. They only create new counters if there is no counter of the given name on the element yet.

Initial value

none

Applies to

All elements

Inherited

No

Media

All

Computed value

Specified value

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.counterSet

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

Desktop
X	85	85	68	71	X
Tablets / Mobile
85	85	68	60	X	14.0

Last updated by CSSPortal on: 26th October 2019