Change selected link color using CSS?

Question

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 class) in black text color?

Here's is the code where I apply the class (item1):

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu2
            </a>
        </td>

How can I do this in the css file?

Answer 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");
});

Answer 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.