Question

I am trying to change the color of links inside <li> elements by setting specific classes on the <li> tag. I set my html up like this:

<div id="sidebar_tall">
<ul>
<li class="active_item"><a href="#">1. Property Description</a></li>
<li><a href="#">2. Landlord Details</a></li>
</ul>           
</div>  

Here is my css:

#sidebar_tall li {
list-style: none;
font-size: 14px;
}

#sidebar_tall a {
text-decoration: none;
color: #fff;
text-shadow: 0px 1px #000;
}

.active_item li {
border-top: none;
border-bottom: none;
width: 250px;
}

.active_item a{
color: #1e1f1f;
text-shadow: 0px 1px #fff;
}

I can’t seem to get the active_item link to change colors. I would simply put the class on the <a> tag but I need to keep it on the <li> tag for the purposes of this site. Can anyone see why this isn’t working?

Answer 1

It might be that you are not specific enough in your selector. Try this:

#sidebar_tall .active_item a {
color: #1e1f1f;
text-shadow: 0px 1px #fff;
}