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 valuenone
  • Applies toAll elements
  • InheritedNo
  • MediaAll
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.counterSet

Syntax

Formal syntax: [ <custom-ident><integer>? ]+ | none

counter-set: section;      /* Set section to 0 */
counter-set: 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

h1:before {
   content: "Chapter " counter(chapter) ":"
   counter-increment: chapter;
   counter-set: section;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.