Mixed markers:
In the HTML Lists article we learned about nesting lists. When you create your CSS you should be careful to maintain clear design cues to show the relationship between a nested list and the list that contains it. By far the most common way to do this is by indenting the nested list items - it is in fact the default setting across the browsers.
If you set up your own list indentation, your base setting will simply be multiplied. For example with this CSS:
ul, ol { margin-left: 0; padding-left: 0; } li { margin-left: 2em; }
Nested list items will get 4em padding, double-nested items will get 6em, and so on. You will also find that most browsers change the list markers for unordered lists. For example, in Firefox:
Figure 1: Firefox changes the markers for nested unordered lists.
This is not actually a universal approach (some browsers don't change the list markers), so if you want this effect you should explictly set it. This is very easy using contextual selectors:
ul, ol { margin-left: 0; padding-left: 0; } li { margin-left: 2em; } ul li { list-style-type: disc; } ul ul li { list-style-type: circle; } ul ul ul li { list-style-type: square; }Note the way each selector add another
ul
to find the context of the nested list items. By explicitly setting your choice of list markers, you will get a consistent effect across all browsers. If you would prefer all unordered list items to have the same style, just set a style on ul li {}
and it will apply across the board.
This technique is very useful for ordered lists, too. For example you may want the nested items to have lowercase ascii letters instead of numbers:
Figure 2: A nested ordered list with numbers for the top level items and letters for the nested items.
Unless you are very sure that you want this on all lists, you should set this style for specific lists using a class:
<ol class="decimal-and-alpha"> <li>First item</li> <li>Second item <ol> <li>Nested item</li> <li>Nested item</li> </ol> </li> <li>Third item</li> <li>Fourth item</li> <li>Fifth item</li> </ol>
Then add the class to a contextual selector for the nested items:
ol.decimal-and-alpha ol li { list-style-type: lower-alpha; }