Html – How to start a new list, continuing the numbering from the previous list

csshtmlhtml-lists

I'm trying to do something that used to be really easy before the start 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:

1. do stuff
2. do stuff

Here's a paragraph

3. do stuff

I've seen that the counter-reset and counter-increment CSS properties should be able to achieve this, but I can't get it working. Here's my code so far:

<html>
<head>
  <style type="text/css">
    ol li { counter-increment: mycounter; }
    ol.start { counter-reset: mycounter; }
    ol.continue { counter-reset: mycounter 2; }
  </style>
</head>

<body>
  <ol class="start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

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 ol.continue selector.

What am I doing wrong? What's the minimal HTML/CSS combination required to achieve the desired effect?

Best Answer

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>

Related Topic