CSS Counters


  • counter-set: [ <counter-name> <integer>? ]+ | none

  • counter-reset: [ <counter-name> <integer>? ]+ | none

  • counter-increment: [ <counter-name> <integer>? ]+ | none

  • counter(<counter-name> [, <counter-style> ]?)

  • counters(<counter-name>, <connector-string> [, <counter-style> ]?)


counter-nameThis is the name of the counter that needs to be created or incremented or printed. It can be any custom name as the developer wishes.
integerThis integer is an optional value that when provided next to the counter name will represent the initial value of the counter (in counter-set, counter-reset properties) or the value by which the counter should be incremented (in counter-increment).
noneThis is the initial value for all 3 counter-* properties. When this value is used for counter-increment, the value of none of the counters are affected. When this is used for the other two, no counter is created.
counter-styleThis specifies the style in which the counter value needs to be displayed. It supports all values supported by the list-style-type property. If none is used then the counter value is not printed at all.
connector-stringThis represents the string that must be placed between the values of two different counter levels (like the "." in "2.1.1").


Counters are not a new topic in CSS. It was a part of the CSS Level 2 Specifications (Revision 1 to be precise) itself and hence has very high browser support.

All browsers except IE6 and IE7 have support for CSS Counters.