How to start an ordered list at a specific number in XHTML

W3C LogoTo my horror, XHTML deprecated the start attribute for numbered (ordered) lists, the one that allowed us to start the list at a specific numerical value (other than 1).  Well, scream no more: here's how to do this simple task in XHTML, with a few, short lines of code.

In your inline style or external CSS stylesheet, include the following:

ol.reset { counter-reset: item; text-indent : 20px;}
ol.reset li { display: block; text-indent : -30px;}
ol.reset li:before { content: counter(item) ". "; counter-increment: item; }
ol.reset li ul li { display: block;  }
ol.reset li ul li:before { content:"*"; counter-increment: none; }

Next, add the reset class to your ordered list (or lists), like so:

<ol class="reset">

Finally, in your ordered list, increment specific items with this markup:

<li style="counter-reset: item 18;">

Of course, as soon as I implemented this solution, I found an easier way.

The start attribute has been brought back to life in HTML5. So, an easier fix is just to change your DOCTYPE to html (and make a few small changes to the syntax in your meta elements).

<sigh> The wisdom of hindsight.