title: How to start a new list, continuing the numbering from the previous list?
body: <p>I'm trying to do something that used to be really easy before the <code>start</code> attribute on ol tags was deprecated. I'd just like to have a pair of ordered lists in my page, but start the numbering of the second list where the first one finished. Something like:</p>
  <pre><code>1. do stuff
  2. do stuff
  
  Here's a paragraph
  
  3. do stuff
  </code></pre>
  <p>I've seen that the <code>counter-reset</code> and <code>counter-increment</code> CSS properties should be able to achieve this, but I can't get it working. Here's my code so far:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      ol li { counter-increment: mycounter; }
      ol.start { counter-reset: mycounter; }
      ol.continue { counter-reset: mycounter 2; }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ol class=&quot;start&quot;&gt;
      &lt;li&gt;You can't touch this&lt;/li&gt;
      &lt;li&gt;You can't touch this&lt;/li&gt;
    &lt;/ol&gt;
    &lt;p&gt;STOP! Hammer time.&lt;/p&gt;
    &lt;ol class=&quot;continue&quot;&gt;
      &lt;li&gt;You can't touch this&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>To be honest, even if that worked, it wouldn't be ideal. I don't want to have to specify the number reached by the first list in my <code>ol.continue</code> selector.</p>
  <p>What am I doing wrong? What's the minimal HTML/CSS combination required to achieve the desired effect?</p>