Create a descending list of numbered items

Written byPhuoc Nguyen

Tags

HTML

Created

24 Feb, 2021

By default, an ordered list element (`ol` tag) will display the number for each item in the ascending order. The first item is shown with the number 1. The second item comes with number 2, and so forth.

There are some cases that we would like to reverse the order of numbers, but the actual items are kept. Coundowns such as top 5 movies, top 10 songs, etc., are the best examples for the use case.

To do that, we just simply add the `reversed` attribute:

<ol reversed>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

You can use the `start` attribute which indicates the start number

#Demo

Top 10 movies rated on IMDB

The Lord of the Rings: The Fellowship of the Ring (2001)
The Good, the Bad and the Ugly (1966)
Pulp Fiction (1994)
The Lord of the Rings: The Return of the King (2003)
Schindler's List (1993)
12 Angry Men (1957)
The Dark Knight (2008)
The Godfather: Part II (1974)
The Godfather (1972)
The Shawshank Redemption (1994)

#See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Create a descending list of numbered items

#Demo

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔