How to start a new list, continuing the numbering from the previous list?
The start attribute is valid in html5. I would just use that.
http://w3c.github.io/html/grouping-content.html#the-ol-element
Also http://dev.w3.org/html5/spec/Overview.html#the-ol-element States that it is still supported in all browsers. You would have to test to be sure I guess.
some jquery to set the start attribute dynamically if you are into that sort of thing..
// assuming all your ol's have the class mylist
$(function(){
var counter=1;
$('ol.mylist').each(function(){
$this = $(this);
$this.attr('start',counter);
counter += $(this).find('li').length;
});
});
A much easier solution to the OP's problem is the following:
<ol start="X">
Where X is the value of the list you want to continue, so in his sample:
<ol>
<li>You can't touch this</li>
<li>You can't touch this</li>
</ol>
<p>STOP! Hammer time.</p>
<ol start="3">
<li>You can't touch this</li>
</ol>
As already said, you need :before
and content
, but you also need to disable the default list numbering. This is your fixed CSS:
ol.start {
counter-reset: mycounter;
}
ol.start li, ol.continue li {
list-style: none;
}
ol.start li:before, ol.continue li:before {
content: counter(mycounter) ". ";
counter-increment: mycounter;
}
You don't need to reset the counter for ol.continue
, just continue to use your custom counter. The above code makes sure that the counter is only used for the ol.start
and ol.continue
lists.