Issue #10 - reversing ordered lists

published on

You can reverse ordered lists by using the reversed attribute.

<ol reversed>
<li>Curly Sue (1991)</li>
<li>Uncle Buck (1989)</li>
<li>She's Having a Baby (1988)</li>
<li>Planes, Trains & Automobiles (1987)</li>
<li>Ferris Bueller's Day Off (1986)</li>
<li>Weird Science (1985)</li>
<li>The Breakfast Club (1985)</li>
<li>Sixteen Candles (1984)</li>
The reversed attribute numbers items from high to low.

Ordered lists

  1. Curly Sue (1991)
  2. Uncle Buck (1989)
  3. She's Having a Baby (1988)
  4. Planes, Trains & Automobiles (1987)
  5. Ferris Bueller's Day Off (1986)
  6. Weird Science (1985)
  7. The Breakfast Club (1985)
  8. Sixteen Candles (1984)

With the reversed attribute in place, the visual order of list items stays the same, but they are be numbered from high to low.

You can also combine the reversed and start attributes to change the number the list counts down from.

<ol reversed start="5">
  1. Fifth
  2. Fourth
  3. Third

Unordered lists

The attribute has no effect on unordered lists (ul), even if you change the type.

<ul reversed type="1">
  • Third
  • Second
  • First


Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.