Why Won't My Visited Link Have a Background Color

Why won't my visited link have a background color?

The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).

Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.

CSS bug..?

Why doesn't this a:visited css style work?

Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.

Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.

You can see there are some specific things browsers do to protect against this:

• The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
• If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
• In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.

Thus, there's no workaround for this issue.

Why does a:visited {background-color: only work if used with a:link?

Here is a answer from https://tympanus.net/codrops/css_reference/visited/ that helped me to understand some times ago. You have to set a background-color on element before it has beeing visited

There’s also an “anomaly” related to the background-color applied to a link using :visited: the background color in the :visited state won’t be applied to the link unless an actual “real” background color is applied to the link prior to its visited state—that is, in its :link state.

How to make link not change color after visited?

Text decoration affects the underline, not the color.

To set the visited color to the same as the default, try:

a { 
    color: blue;
}

Or

a {
    text-decoration: none;
}
a:link, a:visited {
    color: blue;
}
a:hover {
    color: red;
}

Link text color not changing after being visited

The :visited pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.

A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in Stack Overflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.

Related Question: How to change the color of hyperlink after click it

Credit to Greg for this answer.

---

Related Topics