specialize color for a single link

Question

I'm trying to create a css menu bar that has all grey text with the exception of a single link, however every attempt I've made either produces all grey or all green link text.

If you look below, EcoSolutions should be green and the rest grey

I've included my latest attempt.... hopefully someone can put an end to my madness :D

Thanks

<ul id='Navigation' class='MenuBar'>
    <li><a href="../index.php">Home</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../simplify.php">Simplify</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../contact_us.php">Contact</a>
        <img src='images/separator.jpg'/></li>          
    <li><a href="../partners.php">Partners</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../services.php">Services</a>
        <img src='images/transSeparator.png'/></li>
</ul>


/****  MenuBar STYLES ****/

.MenuBar
{
    width: 916px;
    padding: 0px 0px 0px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    color: #888;
}
.MenuBar ul
{
    list-style-type: none;
    font-size: .9em;
    cursor: default;
    font-weight: bold;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.MenuBar ul li img
{
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
    vertical-align: middle;
}

.MenuBar li
{
    list-style-type: none;
    font-size: .9em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    float: left;
    height: 37px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    top: auto;
    bottom: auto;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
.MenuBar  ul li a:link, a:visited, a:active 
{
    display: inline;
    cursor: pointer;
    color: #888;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.MenuBar  ul li a:hover 
{
    display: inline;
    color: #FF0000;
    padding: 0px;
    margin: 0px;
}

Answer 1

Try changing this

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

to this

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Answer 2

See my comment ... but

.MenuBar ul li a.green { color: green; } 

should work.

Answer 3

As Catfish implied, your CSS selectors for the links are incorrect. You must repeat the class in a compound selector.

You will need to change the style on the non-green links, too, like so:

.MenuBar ul li a:link, 
.MenuBar ul li a:visited, 
.MenuBar ul li a:active {
    /* styles here */
}

The problem with that is that those selectors will then apply to the green link, and being more specific, they will override the green link selectors as was written by Catfish. That will have to be changed to be at least as specific as the regular link selectors.

.MenuBar ul li a.green:link, 
.MenuBar ul li a.green:visited, 
.MenuBar ul li a.green:active {
    /* styles here */
}

Hope that helps!

Answer 4

To sum it up, change this

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

to this (notice the space between the href="" and the class="")

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

then in your css, change this (what you have presently basically means that you have inside another element with the green class like which is not what your HTML says ;) )

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

to this

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

You can also be more direct and put

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Hope this helps