List attributes you didn't know existed

I think most people know that you can change the type of an <ol>, so you can get something like this:

1. List Item
2. List Item
3. List Item

But, did you know you can also easily reverse the order of a list so it counts down instead of up? Or, what about starting it at a different number (or letter)?

I didn't know this until very recently, and I never hear anyone talking about it, so I'm sure I'm not the only one. And I know these probably aren't the most common things you'll ever use, but like most things I post here, they are the type of things that come up at some random time and you're so happy you have a simple solution for it.

Reversing a list

To reverse the order of a list, all you have to do is add the reveresed attribute to it:

<ol reversed>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

If ever you need to down down to something, instead counting up, this can be useful. Below is how that code would render. Notice that the list items stay in the same order, it's just the counter that is reversed.

See the Pen a reversed list by Kevin (@kevinpowell) on CodePen.

So we're not flipping the list around, we're keeping it the same way you wrote it, just counting down instead of counting up. Cool beans.

Starting at a number other than 1

You can start a list at a number other than one, again, something you won't use every day, but which might come in handy, by adding in the start attribute, followed by a number:

<ol start="5">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

And of course, his can be combined with the type attribute which you can use to change the style of the number to roman numerials (i for lowercase, I for uppercase), or to letters (a for lowercase, A for uppercase).

See the Pen starting a list at 'F' by Kevin (@kevinpowell) on CodePen.

And there you have it, some <ol> attributes you probably didn't know existed 😄