HTML and CSS Reference
In-Depth Information
The scope of a counter name is the nesting level in which it is defined;
it is not necessarily document-wide. If you use the same counter name
in a child element, the browser creates a new instance of the counter at
that level. In our example, all the
<h1>
and
<h2>
elements exist at the
same nesting level, so one instance of the
chapter
and
section
counters
serves that whole level. If you nested a
<div>
tag in that element, which
in turn contained
<h1>
and
<h2>
elements, new instances of both coun-
ters would be created at that new level.
This nesting behavior is critical for nested numbered lists to work. If you
associate a counter with the
<li>
element and then nest several ordered
lists, each list level has its own instance of the counter, with separate
number sequences at each level.
8.4.11.5. Using counters in your documents
Creating counters is of little use if you don't display their values in your
documents. The display is not automatic. To show a counter, use the
special
counter( )
and
counters( )
values in the
content
property.
The
counter( )
value requires the name of a counter inside its paren-
theses, with an optional format specification. The browser then displays
the value of the specified counter within the generated content in the
format desired. The format can be any list format accepted by the
list-
style-type
property, as described earlier in
section 8.4.8.3
.
For example, to actually display the numbers of our numbered chapters
and sections, we expand our style rules for the
<h1>
and
<h2>
elements:
h1:before { counter-increment : chapter;
counter-reset : section;
content : "Chapter " counter(chapter) ": " }
h2:before { counter-increment : section;
content : "Section " counter(section) ": "}
