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:
- First Level Item 1
- First Level Item 2
- Second Level Item 1
- Second Level Item 2
- Third Level Item 1
- Third Level Item 2
- Fourth Level Item 1
- First Level Item 3
Related posts (possibly):
- Drop caps with OpenOffice.org Writer Tutorial Level: Elementary From time to time, I like some...
- Making an A6 booklet in OpenOffice.org the easy way Tutorial level: Elementary I recently had to create an A6...
- 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...
- DAMN It! I was just having some fun at work a couple...
- The awesomeness that is WordPress and child themes After a long long long time, I decided to get...

3 Comments
Just a quick note about this…. I’m not really posting this because it’s anything groundbreaking or anything of the sort. All this web stuff is just a side interest of mine, and I like learning new things. But, sometimes, I forget these new things, so I thought I would use this space to remind myself—maybe in the process, someone else will find these useful too…
Update: This can be used either on a CSS class or a CSS ID. For example, when I updated the theme on this site, the main post area had changed from an ID called “content” to a class called “post-bodycopy.” Because of this, I had to change the “#content” in the CSS to “.post-bodycopy” to get the same effect.
Update: This can be used either on a CSS class or a CSS ID. For example, when I updated the theme on this site, the main post area had changed from an ID called “content” to a class called “post-bodycopy.” Because of this, I had to change the “#content” in the CSS to “.post-bodycopy” to get the same effect.