reversed

Control ordered list numbering direction and start value. Covers reversed, start, and value attributes on ol and li elements.

Overview

The reversed attribute on <ol> reverses the numbering direction so the list counts down instead of up. Combined with start (on <ol>) and value (on <li>), you have full control over ordered list numbering.

Applies to:

reversed — <ol> only
start — <ol> only
value — <li> within an <ol>

Values

Attribute	Element	Value	Effect
`reversed`	`<ol>`	Boolean (no value)	Numbers count down from the total number of items
`start`	`<ol>`	Integer	Sets the starting number for the first item
`value`	`<li>`	Integer	Overrides the counter for that specific item; subsequent items continue from this value

Reversed Lists

A reversed list counts down from the number of items. A list with 5 items numbers them 5, 4, 3, 2, 1.

<ol reversed> <li>Launch the application</li> <li>Run final checks</li> <li>Load test data</li> <li>Configure the server</li> <li>Set up the environment</li> </ol>

Custom Start Value

The start attribute sets the first number. This is useful when a list is split across sections and the second part should continue the numbering.

<h3>Steps 1-5</h3> <ol> <li>Open your terminal</li> <li>Navigate to the project directory</li> <li>Install dependencies</li> <li>Copy the example config</li> <li>Edit the config file</li> </ol> <h3>Steps 6-10</h3> <ol start="6"> <li>Start the dev server</li> <li>Open the browser</li> <li>Log in with test credentials</li> <li>Verify the dashboard loads</li> <li>Run the test suite</li> </ol>

Combined: Countdown from a Number

Use reversed and start together for top-N countdown lists. Set start to the highest number you want.

<h3>Top 10 Programming Languages</h3> <ol reversed start="10"> <li>Ruby</li> <li>Go</li> <li>Swift</li> <li>TypeScript</li> <li>Rust</li> <li>C++</li> <li>C#</li> <li>Java</li> <li>JavaScript</li> <li>Python</li> </ol>

Overriding Individual Items

The value attribute on a <li> overrides the counter for that item. Subsequent items continue incrementing (or decrementing, if reversed) from the new value.

<ol> <li>Introduction</li> <li>Background</li> <li value="5">Main argument</li> <li>Supporting evidence</li> <li>Conclusion</li> </ol>

List Style Types

The reversed and start attributes work with any list-style-type — Roman numerals, letters, and other numbering systems all reverse correctly.

<ol reversed style="list-style-type: upper-roman;"> <li>Final act</li> <li>Intermission</li> <li>Opening act</li> </ol>  <ol reversed style="list-style-type: lower-alpha;"> <li>Third choice</li> <li>Second choice</li> <li>First choice</li> </ol>

Accessibility

Screen readers announce the list item numbers correctly, regardless of reversed or start values.
The semantic ordering is communicated to assistive technology — a reversed list is read in its visual order (top to bottom), with the descending numbers.
Do not use CSS counter-reset/counter-increment to fake reversed numbering — it does not communicate the correct semantics to assistive technology.

Limitations

The reversed attribute only applies to <ol>. It has no effect on <ul>.
The start attribute accepts only integers. It does not accept Roman numerals or letters even when list-style-type uses them.
When reversed is used without start, the count begins at the total number of <li> elements. Dynamically adding items changes the starting number, which can be unexpected.
The value attribute on <li> resets the counter, which affects all subsequent items. There is no way to override a single item without affecting the ones after it.