Page 132 - CSS

Chapter 16: 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- This is the name of the counter that needs to be created or incremented or
name printed. It can be any custom name as the developer wishes.

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
integer
properties) or the value by which the counter should be incremented (in
counter-increment).

This is the initial value for all 3 counter-* properties. When this value is used
none for counter-increment, the value of none of the counters are affected. When this
is used for the other two, no counter is created.

This specifies the style in which the counter value needs to be displayed. It
counter-
supports all values supported by the list-style-type property. If none is used
style
then the counter value is not printed at all.

connector- This represents the string that must be placed between the values of two
string 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.

Examples

https://riptutorial.com/ 110