Today I was looking up which was the deprecated tag among <s>, <strike> or <del> and I came across another deprecated HTML item that I thought was interesting. That is, the ‘start’ attribute to ordered lists is no longer valid. So how then are you supposed to get an ordered list that doesn’t begin at 1 or for that matter, how are you supposed to continue from a previous ordered list? I will tell you.

You are now supposed to use CSS to “style” ordered lists with the correcting numbering using the content property. As you may remember from your dusty CSS reference book, the content property is really only used for selections that use the :before and :after pseudo-elements. The input for this property can be “normal”, “inherit”, “none”, any URI or a string. And something that can be included in any content string is a reference to a counter. That’s where the magic happens.

So, if you set the rarely use counter-increment CSS property to the name of a variable you will be able to reference the counter in the content of a li:before. This is done like so:

    ol > li:before {
      content: "Chapter " counter(chapter) ". ";
      counter-increment: chapter; 
    }

This is how we can get a custom ordered list for a table of contents or what have you. But how then do you get a list to continue the number scheme after it has been closed?

Continuing from a previous ordered list

This is accomplished with the counter-reset CSS property. It can take the identifier of a counter with an optional integer as its parameters to create or reset a counter. So let’s say that we have a document with two ordered lists that are broken apart by a horizontal rule. If I want to make the second list pick up where the other left off I’m going to have to know one thing, the counter identifier that the previous list used. That means you are going to have to set a counter for the first list. Something like this:

    ol.start {
      counter-reset: chapter;       /* Sets the "chapter" counter to 0. */
    }

Then just make sure that the list items in the next “increment” the counter that was set in the previous list.

    ol.continue {
      counter-increment: chapter;
    }

Skipping numbering ahead in an ordered list

Just like continuing the numbering from the previous list you’ll need to set the CSS property for incrementing the proper counter. But to make it start incrementing from a different starting point you can pass an optional second parameter in counter-reset property of a number. So starting from 5 would look something like this in your CSS:

    ol.continue {
      counter-reset: chapter 4;     /* Resets counter to 4. */
    }

Since the counter will always be reset before it is incremented, to start our list with the number 5 we will have to set the counter to 4.

That’s pretty much all the basic information you’ll ever need to know to replace the deprecated ‘start’ property. There is a lot more you can do with counters and content properties but I’ll save that for another post.

CSS Ordered List <ol> Numbering Examples »