Styling visited links

Question

The second to last link, when clicked, shows its default state which is to turn and remain a dark purple.

<div id="footer">
    <p><b>Logged in as:</b> <pre><?php echo showUser(); ?></pre></p>
    <p><b>Tracks rated so far:</b><pre><? echo showRatings(); ?></pre></p>
    <p><b>Withdraw from experiment:</b> <a href="kill_session.php">Click here</a>.</p>
    <p><b>Contact information:</b> <a href="mailto:#">d"""""""""".com</a>.</p>
</div>

My CSS is as follows:

#footer a {
    text-decoration: none;
}
#footer a:hover {
    color: red;
}
#footer a:active {
    position: relative;
    top: 2px;
    color: blue;
}

Its only basic, but improves it from the basic style. How can I make the visited link remain blue?

Either set a color to `#footer a` or `a:visited` to override the user agent stylesheet. Also follow the [*LVHA* order](http://stackoverflow.com/questions/16994383/why-do-alink-visited-hover-active-need-to-be-in-correct-order). — Hashem Qolami, Nov 25 '14 at 16:46
[Use `#footer a:visited { color: blue }` to specify the text color for visited links](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited) — misterManSam, Nov 25 '14 at 16:46
Thanks - I've changed my css and all is okay now :-) On to my next little niggles! — user1574598, Nov 25 '14 at 16:49

score 3 · Accepted Answer · edited May 23 '17 at 12:27

3

Either set a color on #footer a:

#footer a { color: blue }

or

Set a color with a:visited to override the user agent stylesheet:

#footer a:visited { color: blue }

Remember to follow the LVHA order (:link, :visited, :hover, :active)

edited May 23 '17 at 12:27

Community

1
1

answered Nov 25 '14 at 16:52

misterManSam

24,303
11
69
89

Thanks - was going to say put it as an answer and I'll accept :-) Thanks for the link also :-) – user1574598 Nov 25 '14 at 16:54

Styling visited links

1 Answers1