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>onlystart—<ol>onlyvalue—<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.
<!-- Countdown list: 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.
<!-- Start numbering from 6 (continuing a split list) --><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.
<!-- Top 10 countdown starting at 10 --><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.
<!-- Override specific item numbers --><ol> <li>Introduction</li> <li>Background</li> <li value="5">Main argument</li> <li>Supporting evidence</li> <li>Conclusion</li></ol><!-- Renders as: 1, 2, 5, 6, 7 -->List Style Types
The reversed and start attributes work with any list-style-type — Roman numerals, letters, and other numbering systems all reverse correctly.
<!-- reversed works with any list-style-type --><ol reversed style="list-style-type: upper-roman;"> <li>Final act</li> <li>Intermission</li> <li>Opening act</li></ol><!-- Renders as: III, II, I --> <ol reversed style="list-style-type: lower-alpha;"> <li>Third choice</li> <li>Second choice</li> <li>First choice</li></ol><!-- Renders as: c, b, a -->Accessibility
- Screen readers announce the list item numbers correctly, regardless of
reversedorstartvalues. - 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-incrementto fake reversed numbering — it does not communicate the correct semantics to assistive technology.
Limitations
- The
reversedattribute only applies to<ol>. It has no effect on<ul>. - The
startattribute accepts only integers. It does not accept Roman numerals or letters even whenlist-style-typeuses them. - When
reversedis used withoutstart, the count begins at the total number of<li>elements. Dynamically adding items changes the starting number, which can be unexpected. - The
valueattribute 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.