Style <li>s except last one

HTML & CSS
1

I have a basic unordered list that I want to style.

I want to add a style to all the lis except that last one.

If it’s any easier, I know the list will always have three items, and only have three items, so I want to apply a style to the first two items and not the third one.

The list is dynamically created so I can’t set an id or specific class for the third li.

Any suggestions?

Thanks!

2

The list is dynamically created so I can’t set an id or specific class for the third li.
Okay, since you can’t set ID or class your only option left with support for IE7+ is to use the “adjacent sibling selector”. It won’t work in IE6 but your the one that put these limitations on us. :slight_smile:

IE8 and under do not support :last-child so that is why I don’t see it as an option.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple List</title>
<style type="text/css">
#nav {
    margin:0;
    padding:0;
    list-style:none;
}
#nav li {
    width:200px;
    margin:4px 0;
    background:red;
}
#nav li+li+li {
    background:lime;
}
</style>
</head>
<body>

<ul id="nav">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

</body>
</html>
3

Thanks Rayzur, for such a simple but comprehensive solution.

Works for me!