Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the numbering on an ordered list?

Tags:

You can change the number at which an ordered list starts like this:

<ol start="3">     <li>item three</li>     <li>item four</li> </ol> 

...but is there a way to make list items have arbitrary numbers, not just consecutive numbering?

<ol>     <li>item two</li>     <li>item six</li>     <li>item nine</li> </ol> 

The only way I can see to do it now is to wrap each <li> in its own <ol> which obviously isn't ideal. HTML, Javascript and CSS solutions are welcome.

ps: though the item numbers are arbitrary, they are still ordered, so don't be fretting about the semantics

like image 253
nickf Avatar asked Jun 15 '09 07:06

nickf


People also ask

Which tag is used to change the numbering of an ordered list?

Answer. Answer: The value attribute may be used on an individual <li> element within an ordered list to change its value within the list.


2 Answers

In HTML 4.01 there is a deprecated value attribute on <li> :

<ol> <li value="30"> makes this list item number 30. <li value="40"> makes this list item number 40. <li> makes this list item number 41. </ol> 

The non-deprecated (CSS) answer is (as so often) more elegant but less... direct :) The spec is somewhat dry; googling turns up more immediately usable stuff such as this :

Just like continuing the numbering from the previous list you’ll need to set the CSS property for incrementing the proper counter. But to make it start incrementing from a different starting point you can pass an optional second parameter in counter-reset property of a number. So starting from 5 would look something like this in your CSS:

ol.continue {   counter-reset: chapter 4;     /* Resets counter to 4. */ } 

Since the counter will always be reset before it is incremented, to start our list with the number 5 we will have to set the counter to 4.

like image 99
AakashM Avatar answered Sep 19 '22 05:09

AakashM


There's the value attribute on li, although that's deprecated:

<ol>     <li value="2">item two</li>     <li value="6">item six</li>     <li value="9">item nine</li> </ol> 

The w3schools page for <li.@value> says:

The value attribute of the li element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

Note: At the moment, there is no CSS alternative for the value attribute.

(Despite saying "use styles" for the deprecation warning on the main <li> page.)

The HTML 5 editor's draft reference for li suggests it's still valid there...

like image 32
Jon Skeet Avatar answered Sep 21 '22 05:09

Jon Skeet