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?
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" 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
...
ol li {...} should be ol li:before {...} - otherwise this is perfect solution, thank you! –
Bobbette 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
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).
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>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>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>© 2022 - 2024 — McMap. All rights reserved.