CSS Changing the color of a selected link using classes

Question

I have created a basic HTML menu in which use css. I used a class "nav" throughout the whole menu for simplicity. However because I used a class I am unsure of how to make the button for the active page in new color.

Basically everything but the image should be a new color when the page is active (user on the page).

this is my code:

    <!--nav-->
    <ul class="nav">
    <li class="nav"><a href="index.html" target="_self"><img class="nav" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " /></a></li>
    <li class="nav"><a class="nav" href="index.html" target="_self">Home</a></li>
    <li class="nav"><a class="nav" href="Products.html" target="_self">Products</a>        </li>
    <li class="nav"><a class="nav" href="ShoppingCart.html" target="_self">Cart <img class="cart_t" src="images/cart.png" alt="cart.jpg"  /></a></li>
    </ul>
    <!--end nav-->

and the css

/* nav */
ul.nav
{
    list-style:none;
    background-color:#999;
    border-top-right-radius:20px;
    border-top-left-radius:20px;
    width:1000px;
    height:70px;
    font-size:20px;
    margin:0px auto;
}
li.nav
{
    display:inline;
    margin:0px;
}
a.nav
{
    color:#000;
    background-color:#CCC;
    border-color:#999;
    border-style:outset;
    padding-left:45px;
    padding-right:45px;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:10px;
    border-radius:15px;
    position:relative;
    bottom:20px;
    left:150px;
}
a.nav:hover
{
    background-color:#666;
    border-style:inset;
    color:#333;
    box-shadow: 0px 0px 20px #FFF;
    text-shadow:none;
}
img.nav
{

    border:none;
    margin-top:10px;
    position:relative;
    right:20px;
}
.cart_t
{
    border:none;
    position:relative;
    top:10px;
    left:15px;
}
ul li a:active
{
    background-color:#FF0000;
    font-size:33px;
}

/*end nav*/

You should have a look at this question: http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css — user1525612, Sep 09 '13 at 02:45
This cannot be done with pure CSS. You will have to identify the current page on the server, or with javascript. — 000, Sep 09 '13 at 02:49

score 0 · Accepted Answer · answered Sep 09 '13 at 02:50

Hi what you are doing is somehow wrong. As you are using class="nav" for both the links and the list items. That's pretty wrong, you should be using class names other then that are already in use. Use something like this:

<li class="nav_li">
   <a class="nav_link" href="index.html" target="_self">
      <img class="nav_image" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " />
   </a>
</li>

Just to differentiate them, this way it would be easy to set the styles for them.

However you can use this too: li.nav a.nav ul.nav img.nav. And now the main thing about your code is that you are not specifying what properties should be for the image link. Try this for that:

a.nav img {
/* all the properties for that! */
}

This will try to set the properties for the image. You can use background-color: #hexcode or color: #hexcode;.

But still the best method would be to use different classnames.

And the

$(window).focus(function() { // jQuery

Would do the job for you. Set the CSS properties in this function.

CSS Changing the color of a selected link using classes

1 Answers1