Issue #10 - reversing ordered lists

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>
</ol>

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">
  <li>Fifth</li>
  <li>Fourth</li>
  <li>Third</li>
</ol>

5. Fifth
6. Fourth
7. Third

Unordered lists

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

<ul reversed type="1">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ul>

• Third
• Second
• First

Resources

• Reverse ordered lists (matuzo.at)
• Reversed attribute of ordered lists (caniuse.com)
• The Ordered List element (MDN)