Is it possible to specify a starting number for an ordered list?
start="number"
unfortunately doesn't automatically change based on the numbering before it.
Another way to do this that may fit more complicated needs is to use counter-reset
and counter-increment
.
Problem
Say you wanted something like this:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four
You could set start="3"
on the third li
of the second ol
, but now you'll need to change it every time you add an item to the first ol
Solution
First, let's clear the formatting of our current numbering.
ol {
list-style: none;
}
We'll have each li show the counter
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}
Now we just need to make sure the counter resets only on the first ol
instead of each one.
ol:first-of-type {
counter-reset: mycounter;
}
Demo
http://codepen.io/ajkochanowicz/pen/mJeNwY
ol
list-style: none
li
&:before
counter-increment: mycounter
content: counter(mycounter) ". "
&:first-of-type
counter-reset: mycounter
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
<p>Interruption</p>
<ol>
<li>Item three</li>
<li>Item four</li>
</ol>
<p>Interruption</p>
<ol>
<li>Item five</li>
<li>Item six</li>
</ol>
Now I can add as many items to either list and numbering will be preserved.
1. Item one
2. Item two
...
n. Item n
Interruption from a <p> tag
n+1. Item n+1
n+2. Item n+2
...
If you need the functionality to start an ordered list (OL) at a specific point, you'll have to specify your doctype as HTML 5; which is:
<!doctype html>
With that doctype, it is valid to set a start
attribute on an ordered list. Such as:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
<ol start="">
is not deprecated anymore in HTML5, so I'd just keep using it, regardless of what HTML4.01 says.
I'm surprised that I wasn't able to find the answer in this thread.
I have found this source, which I have summarised below:
To set the start attribute for an ordered list using CSS instead of HTML, you can use the counter-increment
property as follows:
ol {
list-style: none;
counter-increment: start 3;
}
li:before {
content: counter(start, lower-alpha) ") ";
counter-increment: start;
}
counter-increment
seems to be 0-indexed, so to get a list that starts at 4, use 3
.
For the following HTML
<ol>
<li>Buy milk</li>
<li>Feed the dog</li>
<li>Drink coffee</li>
</ol>
My result is
d) Buy milk
e) Feed the dog
f) Drink coffee
Check out my fiddle
See also the W3 wiki reference