Using the 'reversed' attribute in ordered lists in HTML



March 27, 2020

alt text

Happy Friday guys! 😎🔥
Since it's been a while since i posted an HTML tip, decided to bring you one today: the reversed attribute on ordered list element.

An ordered list - 'ol' - is practically the same as 'ul' with the difference that is ordered. So, when you put your list items - 'li' - it will automatically put numbers in front of each item, by order.

<div class="container"> <ol start> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ol> <ol reversed> <li>Fifth Item</li> <li>Fourth Item</li> <li>Third Item</li> <li>Second Item</li> <li>First Item</li> </ol> </div>

What is usually not known is that you can add an attribute that will define the order on the 'ol' - start or reversed. By the default, an ordered list will have 'start', so it will put the numbers by order - 1, 2, 3, 4, ...

If you add the 'reversed' attribute, we will have the opposite order - ... 4, 3, 2, 1 - on the numbers that appear in front of each item. Notice that is just the numbers that change order, not the actual items.

.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; } ol { background-color: #FAFAFA; padding: 20px 50px; margin: 50px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 4px; } ol li { margin: 20px 0; color: #212121; font-weight: 600; }

And that's it, super simple! Hope you guys have a great weekend and stay at home! 😁🙏