Styling Nested List Items With CSS
Thursday, September 25th, 2008Many years ago designers overlooked an important piece of the pie known as efficient web design - the use of lists. As the years progressed, this overlooked portion began to take shape as an art form and started to show the world the power it could harness to make the web a more manageable place.
With that mouthful, let us move on to see how we can use CSS to nest lists!
First and foremost - keep your list CSS in one CSS file
One issue I’ve seen from working with premade layouts is that some have various stylesheets and each have classes and selectors pertaining to the same list items. In reason, it can be assumed that you may want to seperate these stylesheets to operate with different browsers (such as IE6 or IE7 while using the and conditional statements for Internet Explorer 7 and Pre Internet Explorer 7 respectively). However, there really shouldn’t be a big hassle between the browsers in terms of lists. For example:
body {}
ul
{
list-style:square;
}
/*We shall create css to format interior lists, going 3 deep from the root*/
ul li ul,
ul li ul li ul,
ul li ul li ul li ul
{
padding-top:10px;
list-style: url('../images/mapbrack.gif');
}
In our css, we have defined styles for ul selector. From there we have moved on to specify styles for more intense DOM structure, such as nested lists.
The HTML could look like the below example:
<ul> <li><a href="#"><a href="#">Test</a></a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test Group <ul> <li><a href="#">Inner Test 1</a></li> <li><a href="#">Inner Test 2</a></li> <li><a href="#"> Inner Test 3 <ul> <li><a href="#">Inside Inner Test 1 <ul> <li><a href="#">Last Test 1</a></li> <li><a href="#">Last Test 2</a></li> <li><a href="#">Last Test 3</a></li> </ul> </a></li> </ul> </a></li> <li><a href="#">Inner Test 4</a></li> </ul> </a></li> <li><a href="#">Test 4</a></li> <li><a href="#">Test 5</a></li> </ul>
As you can see we have did quite a number on nested lists. Not only do we have one nested list, but we have created nested lists within nested lists that will gracefully stretch across IE, Firefox, and Safari. The result is that you have optimized your css to limit the amount of code to render and produce the same result. You can look at it as trimming the fat off of the CSS, or you can look at it as just one small step in saving resources.