Is it possible to specify a starting number for an ordered list?

Solution 1:

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.

start="number" sucks because it 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

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
...

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