Correctly numbered outlines

For the longest time I was looking for a way to make nested ordered lists in HTML show up correctly.

Usually, when you do an ordered list, you get something like this …

  1. Item 1
    1. Item 1.1
    2. Item 1.2
      1. Item 1.2.1
      2. Item 1.2.2

… which really annoyed me, because you couldn’t have meaningful identifiers on the nested lists.

A few days ago I found a bit of CSS that would correct this…

OL        { list-style-type: decimal  }  /* 1 2 3 4 5 etc. */
OL OL     { list-style-type: lower-alpha}      /* a b c d e etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */-->

Now the same list will show up with the first level list using numbers, the 2nd level list using lowercase alpha, and the 3rd level lower case roman numbers.

Something like this…

  1. Item 1
    1. Item 1.1
    2. Item 1.2
      1. Item 1.2.1
      2. Item 1.2.2

Which is pretty cool, imho.

Related posts ...
If you're seeing a lot of messages about untrusted TLS connections in your mail log
We all agree that email is crucial to modern life. But what email should you
As part of my migration to the cloud, I terminated the Comcast Business internet service
With my recent migration of servers from my basement to Amazon cloud servers, I had

1 thought on “Correctly numbered outlines

  1. Stephen Roman

    I could have sworn that nested ordered lists were lettered by default the way that your second example is. Looking at the source code of your examples though, you seem to be proving me wrong.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.