CSS Counters
Syntax
-
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> ]?)
Parameters
| 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-set, counter-reset properties) or the value by which the counter should be incremented (in counter-increment). |
| 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"). |
Remarks
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.
