Question

Ok so I have the follow menu:

<div class="header">
        <div id="logo"></div>
        <ul class="menu">
            <li><a href="/index.aspx">Home</a></li>
            <li><a href="/about.aspx">About</a></li>
            <li><a href="/contact.aspx">Contact</a></li>
        </ul>
    </div>

Associated with this CSS class:

.header {
    margin:20px 0 55px;
    height:68px;
    width:inherit;
}

What can I put in my menu tag or my CSS class to make the link not change colors when it is clicked. Currently the link will be blue but once it has been clicked it turns purple. I want it to be say black all the time, clicked or not.

Answer 1

No better way than to quote the specs:

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
a:active  { color: gray }   /* when element accepts tab focus */

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

So this should cover all cases:

.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
    color: black;
}

http://jsfiddle.net/ZgUZn/1/

Joerg noted in a comment below the question that I omitted :focus. I did, and for a reason, but I’ll note why and you can consider if you need it or not:

.header a:focus {
    color: white;
    background: blue;
    font-size: 2em;
}

http://jsfiddle.net/ZgUZn/5/

Go to that link, click in the white part of the page in the bottom, right quarter, then hit the TAB key. You’ll see that when that element receives focus, it changes. You can cover that by including this psuedo-class, but it’s my understanding that browsers do not have a default setting for this, so unless you set it somewhere else and you need to cancel it out, it might be unnecessary.

NOTE: I seem to remember in the back of my mind recently I found out that just .header a may also work, but honestly I’m not sure how, and I’ve always understood the above is how it should be done (belt-and-suspenders notwithstanding). Comments welcome on this point.

EDIT

As to the above note, I think I’ve got an answer:

a,
a:link,
a:visited,
a:hover,
a:active {
    background: green;
    color: white;
    font-size: 2em;
}
.header a {
    color: black;
}

http://jsfiddle.net/ZgUZn/6/

The .header a does not override all of the psuedo-selectors if they have been declared elsewhere. Now, if there aren’t any others declared, it appears to work in overriding the browser’s defaults, but that may be a false-positive.