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

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?

Thanks in advance… ๐Ÿ™‚

The solution I finally adopted
Here’s the HTML and CSS code I finally used. Thanks to Felix for getting me there. Must also mention that Lee offers an interesting jQuery alternative too.

<html>
<head>
  <style type="text/css">
    ol.split { list-style-type: none; }
    ol.split li:before
    {
      counter-increment: mycounter;
      content: counter(mycounter) ".0A00A0";
    }
    ol.split li
    {
      text-indent: -1.3em;
    }
    ol.start { counter-reset: mycounter; }
  </style>
</head>

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

Caveat: it turns out that this ‘solution’ doesn’t work in IE8’s compatibility view (and probably other versions/browsers too). If that doesn’t bother you, great. ๐Ÿ™‚

Answer

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.

Leave a Reply

Your email address will not be published. Required fields are marked *