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

Tags:

Html

Css

Html Lists

Recent Posts