Databases
StackOverflow2013
Postsdbo
POHow to start a new list, continuing the numbering from the previous list?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to start a new list, continuing the numbering from the previous list?
    text
    copied!<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="text/css"&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="start"&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="continue"&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> <p>Thanks in advance... :)</p> <p><strong>The solution I finally adopted</strong><br> 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.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; ol.split { list-style-type: none; } ol.split li:before { counter-increment: mycounter; content: counter(mycounter) ".\00A0\00A0"; } ol.split li { text-indent: -1.3em; } ol.start { counter-reset: mycounter; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ol class="split start"&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="split"&gt; &lt;li&gt;You can't touch this&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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. :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload