Automatic counters and numbering
Written by jon on 11:51 AM Automatic numbering in CSS2 is controlled with two properties, 'counter-increment' and 'counter-reset'. The counters defined by these properties are used with the counter() and counters() functions of the the 'content' property.'counter-reset'
Value: [
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
'counter-increment'
Value: [
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.
The 'counter-reset' property also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.
If 'counter-increment' refers to a counter that is not in the scope (see below) of any 'counter-reset', the counter is assumed to have been reset to 0 by the root element.
Example(s):
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
If an element increments/resets a counter and also uses it (in the 'content' property of its :before or :after pseudo-element), the counter is used after being incremented/reset.
If an element both resets and increments a counter, the counter is reset first and then incremented.
The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
will only reset 'imagenum'. To reset both counters, they have to be specified together:
H1 { counter-reset: section -1 imagenum 99 }
| Posted in »
