Aloe Studios

A few weeks ago I was looking at making some improvements to my default stylesheet with regards to nested unordered lists and nested ordered lists. I didn’t want the same bullet style (list-style) for each successively nested list.

So for unordered lists (UL) I went with disc, circle, square. And for ordered lists (OL), I went with decimal, lower-alpha, lower-roman. Here’s the CSS I ended up with for nested lists:

ul { list-style: disc; }
ul ul { list-style: circle; }
ul ul ul { list-style: square; }
 
ol { list-style: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }

The bullets for unordered lists are admittedly a bit arbitrary, but I did a little research to arrive at the list-style for nested ordered lists. I dusted off the MLA writing style manual and had a look at some document outlines and thus arrived at this CSS:

ol.outline { list-style: upper-roman; }
ol.outline ol { list-style: upper-alpha; }
ol.outline ol ol { list-style: decimal; }
ol.outline ol ol ol { list-style: lower-alpha; }
ol.outline ol ol ol ol { list-style: lower-roman; }

Since most situations dictate that an ordered list actually use numbers (decimal), I opted to start my default  OL styles at decimal and follow with the MLA styles from there, so I ended up with: decimal, lower-alpha, lower-roman. For my default stylesheet, I didn’t go beyond 3 levels of lists.  In general, I’ve not seen sites nest lists deeper than 2 levels very often so I feel accounting for 3 levels is a relatively adequate catch-all.

Personally, I haven’t yet had the need to use MLA outline style for nested ordered lists, but perhaps I – or someone – will need it at some point.