Cumulative List Numbering

With CSS2.1 in FireFox

Years and years ago, when I first began coding simple HTML, I was flabbergasted that you couldn't easily reproduce one of the most basic numbered outline formats available in Word and other word processors. See my example:

1. Animal

1.1 Vertebrates
1.2 Invertebrates

1.2.1 Squids
1.2.2 Octopi

2. Mineral
3. Vegetable

3.1 Apples

3.1.1 Macintosh
3.1.2 Fuji
3.1.3 Pink Lady (my favorite)
3.1.4 Red Delicious

3.2 Oranges

3.2.1 Blood
3.2.2 Valencia
3.2.3 Persian

In my research I came across CSS 2.1 numbering, the counter-increment and counter-reset stuff, which appeared to be designed for what I wanted to do. It's implemented in FireFox, no luck in IE7, but because it's a bit subtle and complex my first few attempts were unsuccessful when I've tried to get it working.

I won't go into the particular or technical meaning of these CSS attributes, you can find description of that easily enough. Here's the CSS code of the example. See it in action (Doesn't work in IE, of course).

And the HTML: