How to change ordered list ol start number or reverse it?

📂 Category: HTML/CSS

🖺 Last modified: 26th May 2020

💻 Experience: Beginner

🕑 Read Time: 4 min

Using a HTML ordered list on your website and you need it to start from a custom number instead of 1? The solution is quite simple. In this tutorial we’ll show you how to easily change the ol start number. Want to reverse the numbers order? No problem, we’ll show you how to do that too.

What is a HTML ordered list and when to change the ol start number ?

Tho ordered list <ol> is a well known and commonly used HTML element. We use the ordered list to display lists where each list item starts with an ordinal number. By default, ordinal numbers start with 1 and increasing by 1 for each following ordered list item. In other words, the default ol start number is 1.

For example, an ordered list used to display the top three most used HTML elements looks like this:

/* Ordered list HTML code: */

<ol>
<li>the div tag</li>
<li>the paragraph tag</li>
<li>the unordered list tag</li>
</ol>

/* Result in browser: */

1. the div tag 
2. the paragraph tag
3. the unordered list tag

There are particular cases when we need our ordered list to begin with a different initial value than the default 1 ol start number. Those cases can be various situations such as:

  • single ordered lists starting with 0 or any other number except 1
  • ordered lists with breaks containing some text or other content *
  • multi column ordered lists *
  • multiple ordered lists whitin the same counting context *

* In those cases we need to use multiple ordered lists each starting with a different initial number.

Ordered list with custom ol start number

Custom starting number ordered lists have a widespread use. The photo shows an uneven multi column list created using custom starting number ordered lists.

 

How to use a custom ordered list ol start number ?

Tho ordered list <ol> HTML tag uses a specific attribute to define a custom ol start number. The attribute syntax is start=”X”, where the X value is the list custom starting number.

In the following examples we’ll show you a couple of ordered lists using custom starting number values. In the first example, let’s create a ordered list of competitors and divide them into those who qualified and those who did not. We’ll use a default ordered list for qualified competitors and a custom starting number ordered list for those who did not.

/* HTML code: */

<p>Competitors qualified for next round:</p>

<ol>
<li>Jack Quarterback</li>
<li>Roy Corvus</li>
<li>Ben Harring</li>
</ol>

<p>Did not qualify:</p>

<ol start="4">
<li>Sam Daniels</li>
<li>Mark Barenet</li>
</ol>

/* Result in browser: */

Competitors qualified for next round:

1. Jack Quarterback
2. Roy Corvus
3. Ben Harring

Did not qualify:

4. Sam Daniels
5. Mark Barenet

In the next example we’ll analyze the situation when we need to create an uneven three column ordered list. By uneven we mean different number of list items in each column. We could use the column-count: 3; CSS property, but that property would create an even three column list with the same number of items in each column.

The solution would be to create three separate order lists, each with it’s own custom ol start number. We also need to float the lists one next to another to get the 3 column layout. So, lets group some colors by warmth now:

/* HTML code: */ 

<ol class="list-column">
<li>Red</li>
<li>Orange</li>
<li>Brown</li>
<li>Yellow</li> 
</ol>

<ol class="list-column" start="5">
<li>Blue</li>
<li>Teal</li>
<li>Turquoise</li>
</ol>

<ol class="list-column" start="8">
<li>Black</li>
<li>White</li>

</ol>

/* CSS code: */ 

.list-column { width: 33%; float: left; }

/* Result in browser: */ 

1. Red        5. Blue           8. Black
2. Orange     6. Teal           9. White
3. Brown      7. Turquoise   
4. Yellow

Reverse numerical order in lists with custom ol start number

Did you know that ordered lists with custom ol start number can be set to count backwards, from higher to lower values. To achieve that, all you have to do is add the reversed attribute to the <ol> HTML tag together with the start=”X” attribute. Here’s an example of an ordered list with reversed ordinal numbers:

/* HTML code: */

<ol start="3" reversed>
<li>Black</li>
<li>Gray</li>
<li>White</li>
</ol>

/* Result in browser:  */

3. Black
2. Gray
1. White

 

Learn more about HTML lists

HTML lists are some of the most used elements in web design. In this tutorial we showed you how to change the ordered list ol start number. We have a couple more tutorials that will help you extending the knowledge on HTML lists and all the possibilities of customizing them according to your needs: