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
Answer. Answer: The value attribute may be used on an individual <li> element within an ordered list to change its value within the list.
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.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With