HTML and CSS Reference
In-Depth Information
When the CSS2-conscious browser encounters the first <h1> element in
the document, it creates both the chapter and section counters and re-
sets their values to 0. At the same time, and for every encounter there-
after, the CSS2-conscious browser enacts the counter-increment prop-
erty to set the chapter counter to 1, representing Chapter 1 , then 2 ,
and so on. As <h2> elements are encountered within a chapter, the sec-
tion counter gets incremented according to the h2 style rule, numbering
each section in order. Notice, too, that the section counter gets reset by
the h1 rule so that the section counter restarts for each chapter. [*]
[*] Note here that the browser doesn't display counters unless you explicitly tell it to. See " Using coun-
ters in your documents ."
Both the counter-reset and counter-increment properties accept lists of
counter names, letting you reset or increment groups of counters in one
property. You can also supply a numeric value after a counter name
so that with counter-reset , the counter gets initialized to that speci-
fied value, and counter-increment adds the value to the current counter
value. Negative numbers are allowed, too, so that you may count down,
if desired.
For example, if we want our document to begin with Chapter 7 and we
want section numbers to increase by 2, we might rewrite the previous
example as follows:
body { counter-reset : chapter 6 }
h1:before { counter-increment : chapter; counter-reset : section }
h2:before { counter-increment : section 2 }
Notice how we created the chapter counter in the earliest possible ele-
ment in our document, using a value one less than the desired first
value. When the browser encounters the first <h1> element, it creates,
sets to 6, and then increments the chapter counter.
Search WWH ::

Custom Search