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.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h6> <h5>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.