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

Question

Is there any reason why this does not work on Internet Explorer or Chrome:

<html>
    <head>
        <style>
            A {font-weight: bold; color:black;}
            A:visited {font-weight: normal; color: black; }
            .Empty {font-weight: bold; color: black; }
        </style>
    </head>

    <body>
        <a href="http://mysite">click me</a>
    </body>
</html>

The link I click never goes to normal and just stays bold. On some other browsers it works.

Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.

One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.

score 39 · Accepted Answer · edited Oct 29 '21 at 15:14

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.

workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way. — johnny, Nov 30 '11 at 20:34

score 2 · Answer 2 · edited Oct 29 '21 at 15:19

2

One useful attribute that does work with :visited is background-color. So try:

:visited {background-color:red;}

:visited also works on non-a elements.

edited Oct 29 '21 at 15:19

TylerH

20,799
66
75
101

answered Jun 23 '20 at 09:31

music

191
5

score 1 · Answer 3 · answered Mar 09 '13 at 15:09

The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.

I came up with the following workaround to reach the desired effect. It is possible to change the background-color of the visited link.

The solution is very simple:

set a background-image on the link with the same height as your link and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it

Here's an example:

a:link {
    color:#000;
    background:#FFF url('../img/linethrough.png') repeat-x top left;
}

a:visited {
    background-color:#000;
    color:#000;
}

score 0 · Answer 4 · answered Nov 30 '11 at 19:29

0

CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.

Explained here: http://reference.sitepoint.com/css/casesensitivity

answered Nov 30 '11 at 19:29

Chris C

2,003
15
18

The only thing that turns document into XHTML is MIME type, not doctype or XML declaration. – duri Nov 30 '11 at 19:31
@duri If so, then it is possible that his server may be serving HTML files with *application/xhtml+xml*. – Chris C Nov 30 '11 at 19:37
This is not correct, or the reason for the issue. – TylerH Oct 29 '21 at 15:15

score -1 · Answer 5 · answered Nov 30 '11 at 19:28

-1

Perhaps try changing the color attribute and see whether that has an effect at all.

To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.

answered Nov 30 '11 at 19:28

hendrikswan

2,263
1
20
25

I put red and it did change it. But the font weight does not. thanks. – johnny Nov 30 '11 at 19:52
This seems like more of a comment than an answer. – TylerH Oct 29 '21 at 15:15

Tuck · Answer 6 · 2011-11-30T19:38:00.103

-3

You need to have separate declarations for a:link, a:visited, a:active, etc.

Remove your first style that does not contain a colon. It's overriding. Replace with a:link.

edited Nov 30 '11 at 19:38

answered Nov 30 '11 at 19:31

Tuck

203
3
8

This is not the issue at play here. – TylerH Oct 29 '21 at 15:17

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

6 Answers6

Linked

Related