CSS Ordered List <ol> Numbering Examples

Continuing an Ordered List

If you were to markup a table of contents that has multiple ordered list <ol> elements, below is a bit of CSS that could style those lists so that they continue their numbering from the previous list. The numbers themselves can’t be laid out like a tradition ordered list so they are floated to the left and every line-item <li> element clears left.

Basically, ordered lists get the class “chapters” and then a secondary class which describes which half of the chapters they are numbering. The “start” class sets the “chapters” counter. The “continue” class manually resets a counter the corresponds with the last number from the previous list.

CSS:

  ol.chapters {
    list-style: none;
    margin-left: 0;
  }
  
  ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
  }
  
  ol.chapters li {
    clear: left;
  }
  
  ol.start {
    counter-reset: chapter;
  }
  
  ol.continue {
    counter-reset: chapter 11;
  }

Example:

Book One
  1. A Long-expected Party
  2. The Shadow of the Past
  3. Three is Company
  4. A Short Cut to Mushrooms
  5. A Conspiracy Unmasked
  6. The Old Forest
  7. In the House of Tom Bombadil
  8. Fog on the Barrow-downs
  9. At the Sign of The Prancing Pony
  10. Strider
  11. Flight to the Ford
Book Two
  1. Many Meetings
  2. The Council of Elrond
  3. The Ring Goes South
  4. A Journey in the Dark
  5. The Bridge of Khazad-dum
  6. Lothlorien
  7. The Mirror of Galadriel
  8. Farewell to Lorien
  9. The Great River
  10. The Breaking of the Fellowship

Reversing an Ordered List

Below is an example of how you could reverse the ordering of an ordered list using CSS. In this example we reset the increment counter to one more than the number of elements in the list. Then when we increment a list-item we increment by negative 1. The result is a list that counts backward.

In this example, again we can’t use the list-style numbering for our elements so I used absolute positioning on the :before pseudo-class to get the desired effect.

CSS:

  ol.reverse {
    list-style: none;
    counter-reset: reverse 11;
  }

  ol.reverse > li:before {
    content: counter(reverse) '.';
    display: block;
    left: -30px;
    position: absolute;
    text-align: right;
    width: 20px;
  }

  ol.reverse li {
    counter-increment: reverse -1;
    position: relative;
  }

Example:

David Letterman’s Favorite Numbers From Ten to One:
  1. Ten
  2. Nine
  3. Six
  4. Five
  5. Eight
  6. One
  7. Four
  8. Three
  9. Seven
  10. Two

Back to The Proper Way to Number an Ordered List <ol> blog post.
Or find out more about the author Timmy Christensen.