Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 546
Mal Ross Avatar asked Jan 06 '11 13:01

Mal Ross


People also ask

How do you do continuous numbering in Word?

Click Select in the Editing group on the Home tab, and then click Select All. Or press CTRL+A. Do one of the following: To number consecutively throughout the document, click Continuous.

How do you continue a numbered list in HTML?

If you start a list, then stop to interject some other content, then begin the list again, you could use &lt;ol start="..."&gt; to continue numbering where you left off.


1 Answers

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>
like image 102
Morkatog Avatar answered Sep 23 '22 06:09

Morkatog