Counters in CSS: making a table of contents list

As I’m sure you know, you can create an ordered bullet point list but it has limitations.  For example, if I wanted to have a table of contents so that the numbering goes 1, 1.1, 1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.3.1 and so on then the standard ordered list just isn’t going to cut it.  Oh, sure, you could reset the numbering on the sub-lists so that it uses roman numerals or something like that but to me that just doesn’t feel quite right…

Enter CSS counters!

Counters offer you a way to increment and decrement a value every time an element has the rule, and there doesn’t have to be one counter – you can have as many as you need,

So using counters can easily produce the correct kind of TOC list that we want. And here’s the jsFiddle to show you just how easy it is.

Did you like this? Share it:

Leave a Reply