Styling Nested Lists

You may insert one type of list in another. This is particularly useful with an outline rendered with ordered lists, where you may want several levels of items. While you can style nested lists using classes or ids, there's an easier way.

Tips

Your selectors should reflect the types of nested lists in your document, that is, you might need something like ul ul ol li.
Ordered lists always use Arabic numerals (1, 2, 3) by default, regardless of their nesting position. Use list-style-type to specify other numbering schemes (see page 218). According to The Chicago Manual of Style, the correct nesting order for lists is I, A, 1, a (and then the 1 and a levels are repeated from then on).
By default, the first level of an unordered list will have solid round bullets, the next will have empty round bullets and the third and subsequent levels will have square bullets. Again, use list-style-type to specify the type of bullets you want (see page 218).
Since list items (li elements) can be nested within other list items, you have to be a bit careful with font sizes specified in relative values. If you use something like li {font-size: 75%}, the font size of the outermost list item will be 75% of its parent element, which, if the parent is a default 16 pixels high, will be 12 pixels, and not a problem. However, the font size of the first nested list item will be 75% of its parent (the first list item, which is 12 pixels), and thus will be only 9 pixels high. Each level gets quickly worse. One solution is to add li li {font-size:100%}. Now nested list items will always be the same size as top level ones. (Thanks to Eric Meyer.)

Styling Nested Lists

Figure 15.22. There are four nested lists here, one in the `Introduction` list item, one in the `Development` item, one in the `Climax` item and one, highlighted and in bold face, inside the `Boy gives Girl ultimatum` item (which is inside the `Climax` item).

Figure 15.23. You can format each level of a nested list separately. If you use percentages for list text, be sure to add the `li li {font-size:100%}` so that it doesn't disappear on you (see last tip).

Figure 15.24. The first level lists (`ol li`) have capital Roman numerals. The second level lists (`ol ol li`) have capital letters, and the third level lists (`ol ol ol li`) have Arabic numerals.

Styling Nested Lists

Figure 15.22. There are four nested lists here, one in the Introduction list item, one in the Development item, one in the Climax item and one, highlighted and in bold face, inside the Boy gives Girl ultimatum item (which is inside the Climax item).

Figure 15.23. You can format each level of a nested list separately. If you use percentages for list text, be sure to add the li li {font-size:100%} so that it doesn't disappear on you (see last tip).

Figure 15.24. The first level lists (ol li) have capital Roman numerals. The second level lists (ol ol li) have capital letters, and the third level lists (ol ol ol li) have Arabic numerals.

Figure 15.22. There are four nested lists here, one in the `Introduction` list item, one in the `Development` item, one in the `Climax` item and one, highlighted and in bold face, inside the `Boy gives Girl ultimatum` item (which is inside the `Climax` item).

Figure 15.23. You can format each level of a nested list separately. If you use percentages for list text, be sure to add the `li li {font-size:100%}` so that it doesn't disappear on you (see last tip).

Figure 15.24. The first level lists (`ol li`) have capital Roman numerals. The second level lists (`ol ol li`) have capital letters, and the third level lists (`ol ol ol li`) have Arabic numerals.