CODEWITHSUNDEEP
css
Mark
Mark

Reputation: 812

Reference separate li selector within ul

I am creating a horizontal navbar and I have an unordered list which I am attempting to style. I want each list item to display a different color when the button is hovered. To do this, I am referencing a separate li within the main ul. My problem is that I can't seem to reference the id called purple within the header id. Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style type="text/css">

body {background-color:#EEEEEE}

#header {list-style-type:none; width:978px; height:35px; margin:0 0 25px 0; padding:0}
#header li {float:left; width:100px; height:29px; background:transparent url(images/menu_grad_0.gif) repeat-x; padding:9px 0 0 10px; margin-right:1px}
#header li a {color:#FFFFFF; font-size:13px; font-weight:bold; display:block; text-decoration: none}
#header #purple li a:hover {color:red}

#container {
    background-color: #6c6b6f;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    width: 978px
}

</style>

</head>
<body>

<div id="container">

<ul id="header">
    <li id="purple"><a href="#">&raquo;&nbsp;Home</a></li>
    <li><a href="#">&raquo;&nbsp;About Me</a></li>
    <li><a href="#">&raquo;&nbsp;Contact</a></li>
</ul>

</div><!--Close DIV Container-->

</body>
</html>

Upvotes: 0

Views: 720

Answers (3)

SmithMart
SmithMart

Reputation: 2801

for something like this id use a class, but you can do it with an id like this:

#header li#purple a:hover {color:red}

That will do what you want, but I would personally use a class as you might want other things on the page to be "purple"

#header li.purple a:hover {color:red}
<li class="purple"><a href="#">&raquo;&nbsp;Home</a></li>

Martyn

Upvotes: 0

skip405
skip405

Reputation: 6279

Another solution would be to target the first li via the :first-child selector - without any ids. Like so:

#header li:first-child a:hover{
    color: red;
}

Upvotes: 0

joshp
joshp

Reputation: 1892

Shouldn't it be just...

#header #purple a:hover {color:red}

Isn't there an extra li in that selector?

Upvotes: 4

Related Questions