CSS: emulating the start attribute

The start attribute of ordered lists is not allowed in XHTML 1.0 Strict. A quick-and-dirty solution would be using the Transitional DTD, but you may experience some compatibility problems if you want your site to strictly follow some legal requirements concerning accessibility. Another solution is to use JavaScript to set this attribute, for example by using the setAttribute() method, but in this case you totally rely on JavaScript. The CSS solution is much easier and requires the use of CSS counters. Note, however, that this solution won't work on text browsers (such as Lynx), because these user-agents don't support CSS. Since this attribute is valid in HTML5, you may use the HTML5 DOCTYPE to get the maximum compatibility. Bear in mind, however, that HTML5 is not yet recognized as an official standard, so the issues mentioned above apply even in this case.

Suppose that we have a structure like this:

<ol class="one">

  <li>A</li>
  <li>B</li>
  <li>C</li>

</ol>

<p>Lorem ipsum dolor sit amet.</p>


<ol class="two">

  <li>D</li>
  <li>E</li>
  <li>F</li>

</ol>

We want the second list start its numbering from 3 instead of 1. Here's our CSS:

ol {
 list-style: none;
}

ol.one {
 counter-reset: one;
}
ol.one li:before {
 counter-increment: one;
 content: counter(one) '. ';
}

ol.two {
  counter-reset: two 3;
}

ol.two li:before {

  counter-increment: two;
  content: counter(two) '. ';

}

All the work is done by the first declaration set on the two class: the counter has been reset to 3, meaning that the numbering will start from 3. You can see the demo below.

Demo

Live demo