Generated Content - Beginning CSS3 - page 351

Generating Subsection Numbers with Nested Lists
If you reset a counter in a descendant element, the browser creates a new instance of the counter, restarting the
sequence in the descendant element's siblings, and resuming it when backing out to the parent's level. This is
similar to what happens when you nest ordered lists (see Figure 15-10 ).
Figure 15-10. Nested ordered lists keep track of the sequence number at each level
The counters() function—not to be confused with the similarly named counter() function—is designed
to create custom numbering sequences for nested elements. It keeps track of the counter at all levels of nesting.
The function requires two arguments: the counter name, and a string of literal text to be used as a separator for
the sequence numbers. As an optional third argument, you can add one of the list-style-type values to specify
how the numbers are displayed.
The simple way to demonstrate the use of the counters() function is with a series of nested ordered lists.
Because ordered lists automatically display numbers, you need to suppress the default numbering and replace it
with the li::before pseudo-element and the counters() function like this (the code is in nested_counters.html):
ol {
list-style-type: none;
counter-reset: nested;
}
li::before {
counter-increment: nested;
content: counters(nested, '.') '. ';
}
In a modern browser, this produces the numbered sequence shown in Figure 15-11 .