Multiple li classes

HTML & CSS
1

Hi guys

how do i work this out, i have a navigation menu, and i want the last item in li to have a different style so im doing this at the moment

.menu li{
float:left;
position:relative;
z-index:100;
background: url(images/nav_break.png) right no-repeat;
}

.menu li.end{
float:left;
position:relative;
z-index:100;
}

and in my html im doing

<li>list item 1</li>
<li>list item 2</li>
<li class=“end”>list item 2</li>

this doesnt seem to work, it is still applying the main li to end item too

any ideas?

2

Hi,
It should be working fine, are you sure that you have your list items nested in a UL with the class of .menu

I do not see the <ul class=“menu”> in the html you posted above.

Try this and see if it does what you are after.

<!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>Nav Menu</title>

<style type="text/css">
.menu {
float:left;
margin:0;
padding:0;
list-style:none;
border:1px solid #000;
}
.menu li{
float:left;
border-right:1px solid #000;
}
.menu li.end{
border-right:0;
}
.menu li a{
float:left;
padding:2px 5px;
background:#CDF;
text-decoration:none;
}
.menu li.end a {
background:#FFF;
border-right:0;
}
.menu li a:hover {background:lime}
.menu li.end a:hover {background:yellow}
</style>
</head>
<body>

<ul class="menu">
    <li><a href="#">list item 1</a></li>
    <li><a href="#">list item 2</a></li>
    <li class="end"><a href="#">list item 3</a></li>
</ul>

</body>
</html>
3

Thanks Rayzur

i didnt put all the code there but it is int he same ul

it didnt work that way but i added my change in the

.menu li.end a

and have achieved what i wanted so thanks :slight_smile:

4

Okay, glad you got it sorted out. :slight_smile:

In the code I posted above I set a right border on the “li” and no right border on the “li.end”.

Then I set the BG colors on the “a” and changed them on hover. Looking back at my code I noticed a typo where I set border-right:0; on the " li.end a ". That was not intended to be there since the borders were set on the “li”

However, you could set your borders on the anchors if you choose to. I am just pointing out the typo below in red. :wink:

.menu li.end a {
background:#FFF;
[COLOR=Red][s]border-right:0;[/s][/COLOR]
}