Web Design in a Nutshell, 3rd Edition

The value of counter-increment provides the name of the identifier (such as “chapter” or “section”) and an optional number that serves as the increment amount. The default is 1, so each instance of the element adds 1 to the counter unless it is specified otherwise. It is possible to specify negative values to make the counter count backward. In this example, the “chapter” counter from the previous example is given the default counter increment of 1.

h1 {counter-increment: chapter; }

This is the same as specifying

h1 {counter-increment: chapter 1; }

These counter functions are useful only when used with the counter( ) and counters( ) values of the content property.

The provided values for counter( ) are the identifier name and an optional style (one of the list-style-type values such as upper-alpha). The counter style is decimal (1, 2, 3, etc.) by default. In this example, the content property is used to insert the automatic counter and the colon character (:) followed by a space before each h2 element in a document.

h2:before {counter(section) ": "
           counter-increment: section; } /* defaults to 1 */

The counters( ) function is used to specify counters that are several levels deep (e.g., 1.0, 1.1., 1.2., 1.3., 2.0, 2.1., 2.1.1, 2.1.2, 2.1.3., and so on) without needing to specify counter rules for each nesting level individually. The hitch is that they must all be given the same identifier name. It is a good idea to provide a separator character such as a period or a comma to visually separate ...