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?

1
2
3
4
5

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:

1
2
3
4

#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

ol>>

3. First Level Item 3
• Share this:

---

Related posts (possibly):

1. Drop caps with OpenOffice.org Writer Tutorial Level: Elementary From time to time, I like some...
2. A sample size calculator function for R IMPORTANT: This is here mostly to remind me of how...
3. The new sample size calculator for R (already) aka “Maybe I shouldn’t post so quickly” Just hours ago,...
4. 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...
5. Making an A6 booklet in OpenOffice.org the easy way Tutorial level: Elementary I recently had to create an A6...