Mar 07 2005

Print this Post

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.

1 comment

  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 *