How to Reverse Ordered List Counters in HTML

An ordered list in HTML uses ascending numbers to display list items, beginning at number 1. The code:

<ol>
  <li>Don't Stop Me Now</li>
  <li>Under Pressure</li>
  <li>We Are the Champions</li>
  <li>Bohemian Rhapsody</li>
</ol>

produces the following list:

1. Don't Stop Me Now
2. Under Pressure
3. We Are the Champions
4. Bohemian Rhapsody

It's possible to reverse the order of the counters with only HTML - no CSS or JavaScript required!

Add a HTML attribute called reversed to the <ol> tag.

The same code as above, only now with the reversed attribute:

<ol reversed>
  <li>Don't Stop Me Now</li>
  <li>Under Pressure</li>
  <li>We Are the Champions</li>
  <li>Bohemian Rhapsody</li>
</ol>

produces a list with descending counters:

1. Don't Stop Me Now
2. Under Pressure
3. We Are the Champions
4. Bohemian Rhapsody

Note that this only reverses the sequence of the numbers, and not the position of the list items contained with the <li> tags.

Where could you use this technique? The only situation I can think of is in a countdown, and perhaps this is why I'd never encountered this attribute before!

The reverse attribute is supported in all modern browsers but has no support in IE. See the caniuse table for the reverse attribute for more details.

I've created a Codepen demo of the reverse attribute which you can play with below:

Comments

[Bence Szabo]

Thanks, I never knew about this attribute!