Change Selected Link Color Using CSS?

I've defined a class (item1) for a set of objects. Is it possible to put red text color the object (from the class) that I click/select and put all the other objects (from the clas

Solution 1:

Here's the fiddle!

And here's the code:

HTML

<td>
            <a class="item1" href="#">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="#">
            Menu2
            </a>
        </td>

JS

$('.item1').click(function(e){
    $('.item1').css("color", "black");
    $(this).css("color", "red");
});

Solution 2:

Is it possible to put red text color the object (from the class) that I click/select

OK some of the terms you're using need a bit of clarity:

• On click in css is called :active
• On hover in css is called :hover
• After click in css is called :visited when talking about an a tag.

If you mean to actually set a link to an "active" state, you may have "symptoms" of that with the :visited selector, but it is by no means the way to do that.

the real way to do that is to physically add a class to your element that will identify it as active, i.e. <a class="active"> and style that particular class accordingly (typically done with a sprinkling of javascript)

So, using javascript how do you add / remove that class?

Using javascript, you listen to click events. every time something is clicked, you do the following:

1. remove the existing active class from whatever element currently holds it.
2. add it to the item being clicked.

Solution 3:

You might be looking for :visited

a:visited {

color:red;

}

Solution 4:

If you're using ajax, or loading your content in another frame, the best is using javascript (jquery):

$('a').each(function(){
   $(this).click(function(){
      $('a').removeClass('selected');
      $(this).addClass('selected');
   })
});

in your style:

a, a:hover, a:visited, a:active{
   color:black;
}
a.selected{
   color: red;
}