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

Question

I have a ordered list where I would like the initial number to be 6. I found that this was supported (now deprecated) in HTML 4.01 using the start attribute. In this specification they say that you can instead specify the starting integer by using CSS.

How would you specify the starting number with CSS?

don't miss this example! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters#example_of_a_nested_counter — Kay V, Jan 16 '22 at 03:18

Travis · Accepted Answer · 2014-10-15T19:00:22.257

188

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>

edited Oct 15 '14 at 19:00

answered Apr 22 '09 at 20:25

Travis

12,001
8
39
52

5

This answer is accurate using HTML5, yes. – Travis Oct 15 '14 at 19:01
2
The start attribute also works for unordered (
– Mattman85208 Jan 04 '17 at 14:18

score 68 · Answer 2 · answered Apr 25 '09 at 15:20

68

<ol start=""> is not deprecated anymore in HTML5, so I'd just keep using it, regardless of what HTML4.01 says.

answered Apr 25 '09 at 15:20

Ms2ger

15,596
6
36
35

score 38 · Answer 3 · edited Feb 16 '22 at 21:34

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

You can also specify your own numbers explicitly: http://stackoverflow.com/a/31823704/320036 — z0r, Aug 05 '15 at 04:54
`ol li {...}` should be `ol li:before {...}` - otherwise this is perfect solution, thank you! — Davor, Feb 03 '16 at 12:22
Running the code snippet in your answer does not produce the expected results; all ordered lists are numbered 1. 2. and the counter restarts after each interruption. — Kröw, Dec 25 '22 at 08:16

score 18 · Answer 4 · edited Oct 31 '17 at 11:45

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

Great answer. This has been a life-saver, thank you. – Andrea Sep 06 '18 at 09:05 — Andrea, Sep 06 '18 at 09:05

score 12 · Answer 5 · answered Feb 16 '16 at 00:20

12

As others suggested, one can use start attribute of ol element.

Alternatively, one can use value attribute of li element. Both attributes are marked as deprecated in HTML 4.01, but not in HTML 5 (ol and li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

answered Feb 16 '16 at 00:20

Andrey

2,503
3
30
39

I dont care old html4 so work with me simple as:
. THANKS

Binh Nguyen

Aug 19 '20 at 12:16

score 5 · Answer 6 · answered Oct 23 '20 at 16:27

Via HTML, using the start attribute

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

<ol start="10">
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

Via CSS, using CSS counters:

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.

ol {
  list-style: none;
  counter-reset: li 9; /* syntax: "counter name" "init value" */
}

ol li:before {
  counter-increment: li; /* for every appearance, add one */
  content: counter(li) ". "; /* mimic default ol list-style */
}

<ol>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

score 1 · Answer 7 · answered Dec 11 '18 at 12:03

Starting the numbering of an ordered list at a number that differs from the default value ("1") requires the start attribute. This attribute was allowed (not deprecated) in the HTML 4.01 specification (HTML 4.01 was not yet a "Superseded Specification" at the time this question was posted) and is still allowed in the current HTML 5.2 specification. The ol element also had an optional start attribute in XHTML 1.0's transitional DTD but not in XHTML 1.0's strict DTD (search for the string ATTLIST ol and check the attribute list). So in spite of what some of the older comments say, the start attribute was not deprecated; rather it was invalid in the strict DTDs of HTML 4.01 and XHTML 1.0. In spite of what one of the comments claims, the start attribute is not allowed on the ul element and currently does not work in Firefox and Chromium.

Note also that a thousands separator does not work (in current versions of Firefox and Chromium). In the following code snippet, 10.000 will be interpreted as 10; the same applies to 10,000. So don't use the following type of counter value:

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

So what you should use is the following (in the rare cases where values higher than 1000 are at all required):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Some of the other answers suggest using the CSS property counter, but this runs counter the traditional separation of content and layout (in HTML and CSS, respectively). Users with certain visual impairments may use their own style sheets, and the counter values might get lost as a result. Screen reader support for counter should also be tested. Screen reader support for content in CSS is a relatively recent feature and behaviour is not necessarily consistent. See Screen Readers and CSS: Are We Going Out of Style (and into Content)? by John Northup on the WebAIM blog (August 2017).

score 0 · Answer 8 · answered Feb 05 '19 at 15:52

In case the lists are nested, there has to be a handling leaving out the nested list items, which I accomplished by verifying that the grand parent is not a list item.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

score 0 · Answer 9 · answered Feb 05 '19 at 16:10

With CSS it is a bit tricky to cover the case that there are nested list items, thus only the first list level gets the custom numbering that does not interupt with each new ordered list. I'm using CSS combinator '>' to define the possible paths to the list items that shall get a custom numbering. See https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

you'll really like this example, which is pretty similar to yours but also handles nesting in a surprisingly elegant way (yay!) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters#example_of_a_nested_counter — Kay V, Jan 16 '22 at 03:17

score -1 · Answer 10 · answered Feb 05 '19 at 15:45

Obviously neither @start of an ordered list <ol> nor @value of a list item <li> can be set via CSS. See https://www.w3schools.com/css/css_list.asp

Replacing the numbering by a counter in CSS seems to be the best/fastest/foolproof solution and there are others promoting it, e.g. https://css-tricks.com/numbering-in-style/

With pure JavaScript it is possible to set @value of each list item, but this is of course slower than CSS. It is not even required to check if the list item belongs to an ordered list <ol>, because unordered lists are left out automatically.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

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

10 Answers10

Linked

Related