css - Don't change link color when a link is clicked

Question

I have a link in an HTML page:

<a href="#foo">foo</a>

The color of the link text is originally blue. When the link is clicked, the color of the link text changes to Red first, and then changes back to Blue. I want to the color of the link text not to change when user clicks on it. How can I make it happen?

I tried

a:active {
    color: none;
}

in CSS, but got no luck.

And I don't want to use this in CSS:

a:active {
    color: blue;
}

, because the original color of the link text can be some other than blue.

Thanks.

Edit: the page is displayed on iPhone browser, and I want to make a:active to keep the original link text color.

Answer 1

you are looking for this:

a:visited{
  color:blue;
}

Links have several states you can alter... the way I remember them is LVHFA (Lord Vader's Handle Formerly Anakin)

Each letter stands for a pseudo class: (Link,Visited,Hover,Focus,Active)

a:link{
  color:blue;
}
a:visited{
  color:purple;
}
a:hover{
  color:orange;
}
a:focus{
  color:green;
}
a:active{
  color:red;
}

If you want the links to always be blue, just change all of them to blue. I would note though on a usability level, it would be nice if the mouse click caused the color to change a little bit (even if just a lighter/darker blue) to help indicate that the link was actually clicked (this is especially important in a touchscreen interface where you're not always sure the click was actually registered)

If you have different types of links that you want to all have the same color when clicked, add a class to the links.

a.foo, a.foo:link, a.foo:visited, a.foo:hover, a.foo:focus, a.foo:active{
  color:green;
}
a.bar, a.bar:link, a.bar:visited, a.bar:hover, a.bar:focus, a.bar:active{
  color:orange;
}

It should be noted that not all browsers respect each of these options ;-)