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?

Is it possible to put red text color the object (from the class) that I click/select? No. using javascript also - yes — ssilas777, Feb 27 '13 at 17:34
We use this in our project's and it will do trick for you unless you are using any third party libraries like bootstrap, check this also http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu — ssilas777, Feb 27 '13 at 18:21

Kristian · Answer 1 · 2013-02-27T17:38:04.067

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:

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

But I want to revert to black if I click on other. This do that? — aF., Feb 27 '13 at 17:34
here I just wanted to share this ... that I found recently: http://css-tricks.com/overriding-the-default-text-selection-color-with-css/ , I know it is not the answer to this question, but the title just reminded me of it =) — Martin Turjak, Feb 27 '13 at 18:11

score 6 · Accepted Answer · answered Feb 27 '13 at 18:02

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

score 4 · Answer 3 · answered Feb 27 '13 at 17:25

4

You might be looking for :visited

a:visited {

color:red;

}

answered Feb 27 '13 at 17:25

Wez

10,555
5
49
63

1

But I want to revert to black if I click on other. This do that? – aF. Feb 27 '13 at 17:34
@Wezly what you've suggested is precisely what I warned against when I said that using `:visited` as an indicator of an active state is merely a symptom of a post click, and is by no means the right way to do that – Kristian Feb 27 '13 at 17:35
Then you should consider using Javascript, @Kristian The question stated HTML and CSS only, Happy to provide a JS example if the question changes. – Wez Feb 27 '13 at 22:47

score 2 · Answer 4 · answered Feb 27 '13 at 17:56

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;
}

Change selected link color using CSS?

4 Answers4

Linked