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…

<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.

One 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.

    Reply

Leave a Reply to Stephen Roman Cancel reply

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