Sometimes I forget how useful the little-used parts of CSS can be. I happened to see a quick screencast about the usage of CSS Counters in my RSS reader today though, and immediately was surprised I hadn’t seen this more often. It’s definitely something I’ll be keeping in the back of my mind.
My first thought while watching, in case someone gets the same idea, is that he’s just making a list. If he wants to number them… use an ordered list. The problem is that he’s using an overly simple example – you could also use these counters in a more complex chunk of HTML. For example, suppose each comment on a blog is in a <div>, with many parts of the comment (author, date, etc) in spans and divs within it. You could take an arbitrary span or whatever tag you like and assign the numbering there, rather than the more limited options an <ol> gives you. It might be possible to still do something like that with an <ol>, but while I’m far from a CSS expert, I don’t see how, and I especially don’t see how it would be as elegant, if it can be done.