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.

Feedback about page:

Feedback:

Optional: your email if you want me to get back to you:

Send Feedback Cancel

---