visited links won't underline

Question

My visited links for a web project won't underline, however, the rest of the visited modifications are working, and underline is working for hover. I showed my instructor this and he was confused, and said he would try to find time to look at it, however, the due date is nearing si I can no longer wait. Here is my the section of my layout page dealing with the anchor tag:

a:link
{
    text-decoration: none;
    color: #d1bd22;
    font-size: 1.3em;
}

a:visited
{
    text-decoration: underline;
    color: white;
    font-size: 1.3em;
}

a:hover
{
    text-decoration: underline;
    color: #d1bd22;
    font-size: 1.3em;
}

a:active
{
text-decoration: none;
    color: white;
    font-size: 1.3em;
}

Here is a link to my website:

http://cis.luzerne.edu/~ds0002/morlansfamousshop.html

Answer 1

Hat tip to @pwdst for spotting this.

See this documentation for Firefox. Similar rules apply to Chrome.

Since JavaScript can read the styles applied to an element (as well as other elements, and the computed styles of the same), allowing changes to a link when it is :visited can reveal information about what others sites a person has visited.

In order to protect users' privacy, browsers limit which properties can be changed by :visited and text-decoration can not be altered.

See also: The Selectors specification which blesses this behaviour:

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

Answer 2

I was correct in the surmise in the comments. If you create a test example (in JS Fiddle or a test HTML file) then the property is being applied when you inspect in Dev Tools, but cannot be seen visually. Why is this?

There were several stories about users privacy being compromised by malicious sites adding links (often hidden) to their pages, and then using the :visited pseudo class to determine if the user had visited the URL or not.

As a result the Mozilla Developer Network states-

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.

Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.

For more information on the limitations and the motivation for them, see Privacy and the :visited selector.

See https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

The fact that the colour property was being applied was also only half true, in that it is reported as applied and visually present - but the getComputedStyle method will lie and return the colour as if the rule was not applied.

As a result malicious webmasters can no longer determine websites you have been visiting using this technique.

Answer 3

I believe the reason this is happening is precedence.

Because you've defined a:link before the others, and the others aren't adding any additional weight, the first definition is being used by the browser.

Try putting the a:link at the end and it should work as expected (since only the specific hover and visited will match the previous definitions)