Menu
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. In this specification they say that you can specify the starting integer by using CSS. (instead of the start attribute)
How would you specify the starting number with CSS?
266
How to create an ordered list with list items numbered with numbers in HTML? To create ordered list in HTML, use the <ol> tag. Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The start value of an ordered list in HTML5 can be specified by implementing the HTML <ol> start Attribute and passing the starting value (number) as the value to the attribute.
To start the list with some other number, say, "4", change the opening <ol> tag so that it now says <ol start="4"> . You can of course use any number here. "4" is just an example.
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.
22
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
...
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
25
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>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>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).
42
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
