1

I'm trying to style some links such that they appear bold if not visited before, and appear as normal if they have been visited before.

HTML:

<a href="http://www.facebook.com/" target="_blank">Facebook</a><br>

<a href="http://stackoverflow.com/questions/6962541/how-do-i-define-font-weight-in-css?lq=1" target="_blank">A Random StackOverflow Question</a>

CSS:

a {
    font-weight: bold;
    text-decoration: none;
    color: #373837;
    font-size: 16px;
}
a:visited {
    font-weight: normal;
}
a:hover {
    text-decoration :underline; 
}

Fiddle.

For some reason, whether or not the links were visited before, they appear bold.

I also tried modifying the CSS:

a {
    text-decoration: none;
    color: #373837;
    font-size: 16px;
}
a:visited {
    font-weight: normal;
}
a:link {
    font-weight: bold;   
}
a:hover {
    text-decoration :underline; 
}

Fiddle. It still doesn't work.

Any idea how to fix this?

(I am using Chrome btw)

chris97ong
  • 6,870
  • 7
  • 32
  • 52
  • Could you use a Stack Snippet instead of a Fiddle link? – jonrsharpe Sep 06 '15 at 09:41
  • 1
    @jonrsharpe for some reason, in Stack Snippet, nothing will happen when I click on links. – chris97ong Sep 06 '15 at 09:43
  • possible duplicate of [Why doesn't this a:visited css style work?](http://stackoverflow.com/questions/8331688/why-doesnt-this-avisited-css-style-work) – JJJ Sep 06 '15 at 09:52

3 Answers3

2

The reason is that not all attributes are allowed for the :visited pseudo selector. See MDN.

You could use other attirubtes, such as color: green.

Amit
  • 45,440
  • 9
  • 78
  • 110
  • No, because it's a security feature. The only way to work around it would be to track clicks on the links on your own page and change the style on click, but it wouldn't be exactly the same as `:visited`. – JJJ Sep 06 '15 at 09:53
0

It seems like a browsers limitation. It seems like a browsers limitation. "For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you’ve been. " read about it here

ohadsas
  • 479
  • 2
  • 7
  • 23
0

It's not font-weight: normal that don't work it's your browser.

Because if you add font-weight: normal on the hover property it will work.

Look at this answer

Community
  • 1
  • 1
Etienne Prothon
  • 982
  • 10
  • 30
  • But I want the `font-weight: normal` if the link is visited. How do i fix it? – chris97ong Sep 06 '15 at 09:49
  • Did you look at the link ? The answer say that's it's a browser limitation to prevent CSS exploit. Link to the article announcing the restrictions -> https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ – Etienne Prothon Sep 06 '15 at 09:52