- 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> ]?)
Parameter | Details |
—— | —— |
counter-name | This 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. |
integer | This integer is an optional value that when provided next to the counter name will represent the initial value of the counter (in
counter-reset properties) or the value by which the counter should be incremented (in
none | This 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-style | This 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-string | This 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.