Nested Lists and CSS

I don’t use lists too often for my own stuff, but I do have to use them often either with my work or with school assignments. Often these lists can be quite long, and have many lists nested within each other.

I was recently converting an outline from a Word document to an HTML document, and I wanted different list levels to be different list-types—similar to the results you would get in MS Word when you increase the indent of a list item. However, simply nesting the lists ended up in a reverting to regular Arabic numerals, so you ended up with a list that looked something like:

1. First Level Item 1
2. First Level Item 2
    1. Second Level Item 1
    2. Second Level Item 2

while what I wanted was something like:

1. First Level Item 1
2. First Level Item 2
    I. Second Level Item 1
    II. Second Level Item 2

My first roundabout solution was to give the different lists a different class and then apply that class to each list item. But that seemed like it was not the correct way to do it, so I poked around on a few sites and checked out the stylesheets on a few WordPress themes to see if I could figure anything out.

And here’s the fun solution:

In your stylesheet, add definitions for your “ol” and “ul” tags, declaring what the list style type for the different levels would be. How might that look?

ol {list-style-type:decimal;}
ol ol {list-style-type:upper-roman;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:upper-alpha;}
... and so on

If your lists appear in a certain div, you may need to identify the div too. For this WordPress theme, for example, they are all within the “content” div, so my CSS includes the following:

#content ol {list-style-type:decimal;}
#content ol ol {list-style-type:upper-roman;}
#content ol ol ol {list-style-type:lower-roman;}
#content ol ol ol ol {list-style-type:upper-alpha;}

Here is an example list:

1. First Level Item 1
2. First Level Item 2
1. Second Level Item 1
2. Second Level Item 2
1. Third Level Item 1
2. Third Level Item 2
1. Fourth Level Item 1
3. First Level Item 3

Related posts (possibly):

1. Drop caps with OpenOffice.org Writer Tutorial Level: Elementary From time to time, I like some...
2. Making an A6 booklet in OpenOffice.org the easy way Tutorial level: Elementary I recently had to create an A6...
3. 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...
4. DAMN It! I was just having some fun at work a couple...
5. The awesomeness that is WordPress and child themes After a long long long time, I decided to get...