PDFI 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
