<h1>How to reverse the counters on a HTML list</h1>

<p>Add the <code>reversed</code> attribute to the <code>&lt;ol&gt;</code> tag: <code>&lt;ol reversed&gt;</code></p>

<ol class="js-list" reversed>
  <li>Don't Stop Me Now</li>
  <li>Under Pressure</li>
  <li>We Are the Champions</li>
  <li>Bohemian Rhapsody</li>
</ol>

<button type="button" class="js-button">Toggle list numbers</button>

<h3>Explanation</h3>
<p>The list above is an unordered list <code>&lt;ol&gt;</code> which has the <code>reversed</code> attribute applied. The numbers or letters used in an unordered list are normally in ascending order, which is 1, 2, 3 or A, B, C. When "reversed" is set to true, the order of is reversed, which is 3, 2, 1 or C, B, A.
</p>
<p>The default value of "reversed" is false. Note that by adding an attribute with no value, it implies a value of true. So <code>reversed="true"</code> is equivalent to <code>reversed</code>.</p>
<p>The button toggles the value of "reversed" between true and false.</p>
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif;
  max-width: 500px;
  margin: 10px;
}

li {
  margin-bottom: 5px;
}

button {
  font-size: 16px;
  color: #eee;
  background-color: #111;
  padding: 8px;
  border: none;
  border-radius: 3px;
}
View Compiled
let list = document.querySelector(".js-list");

document.querySelector(".js-button").addEventListener("click", () => {
  list.reversed = !list.reversed;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.