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.

Tags:

Html

Css