- From: Werner Donné <werner.donne@re.be>
- Date: Mon, 11 Sep 2006 12:22:10 +0200
- To: www-style@w3.org
I've looked through those examples again and the only one for which it doesn't work out of the box is the following: <section> <h>should be 1</h> <div> <section> <h>should be 1.1</h> </section> </div> <section> <h>should be 1.2</h> </section> </section> The variant of my solution for this example is: section, div, h { display: block; } section:before { counter-increment: item; } section > *:first-child:after { counter-reset: item; } h:before { content: counters(item, '.'); } The idea behind it is the same, however. You use nested counters. When such a counter is reset in a nested element this creates a "fresh" counter. You can't simply reset it on the section element in this case, because then the counter would be reset for each occurrence of section. At each level it should only be reset for the first occurrence. However, because of the fact that the section elements are not always siblings (whatever that would mean) and because of the selector syntax, we don't know which is the first nested section element. The point in my example is that you don't have to. The first child element in the nested scope will do fine for resetting the counter. In this particular case we want it after the counter of the parent level has been "consumed", which is why the ":after" pseudo element is needed. A more explicit alternative could be: section > h:first-child + * { counter-reset: item; } -- Werner Donné -- Re Engelbeekstraat 8 B-3300 Tienen tel: (+32) 486 425803 e-mail: werner.donne@re.be
Received on Monday, 11 September 2006 10:22:09 UTC