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…

<style>
<!--
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. */-->
-->
</style>

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.