UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The:visited pseudo-class selector can change some of the styling on an anchor link (<a>) element if the user’s browser has already visited the link. It’s meant to help users distinguish the difference between links they have and haven’t visited.
a:visited {
color: gray;
}Limitations and usage
There is some privacy concern about :visited, namely that a malicious website could have links to tons of websites with :visited styling, then test the visual style of the links with JavaScript to report back to a server which sites the user has visited. This violates the user’s privacy and could potentially reveal personally-identifying information.
As a result, most browsers restrict what styling can be changed on :visited links, and what styling information can be reported with the getComputedStyle method.
This is a good run-down of that situation.
These are the properties that can be changed with :visited:
colorbackground-colorborder-color(and its sub-properties)outline-color- The color parts of the
fillandstrokeproperties
You can only use :visited to change those properties if the link already has them in the “unvisited” or :link state. You can’t use it to add properties that aren’t already present on the link. For example:
You can change the background-color of a :visited link if the link element already had a background color.
You can’t add a background-color to a :visited link if it did not have a background color when it was an “unvisited” link.
Link pseudo-classes in order
It’s also useful to know that most of the link pseudo-classes should be declared in a specific order. The order is:
- Link
- Visited
- Hover
- Active
If you’re including :focus styling for your link, it’s common to add it between “hover” and “active”.
Demo
Extending :visited
Though direct styling for :visited links is limited, there are lots of clever ways to extend your options for styling visited links. In 2015 there was a bumper crop of blog posts sharing new ideas for styling :visited links:
Revisiting :visited, from Joel Califa, shows an example of using localstorage to style visited, in-domain links.
Hacking :visited, from Una Kravets, turns :visited on its head by adding an “unvisited” tag as :after content to links, which is then hidden with a background color swap after the link is visited.
Pushing the limits of :visited with CSS blend modes, from Stelian Firez, combines a little HTML trick attributed to DuckDuckGo and background-blend-mode: screen; to fade a custom icon next to a visited link.
Styling Visited Links with SVG, from Dudley Storey. Uses SVG images with fill set to match the page’s background color when the link is in the :link state, then to another color after the link is :visited. The tutorial also includes an alternate method using Unicode characters instead of SVG.
Browser support
All browsers support this.
asd
Another one for the Extending :visited list.
This was inspired by Joel’s Califa’s script and also uses localstorage to save visited pages. It reverses the concept by highlighting new/unread content (instead of read). The “New” flag can be limited to “content added in the last X days” or all time, until the visitor views it http://blog.fofwebdesign.co.uk/17-show-new-content-until-visited-link-tracking
It should be noted that :visited will not work in incognito mood because incognito disables remembering a link was visited
Thank you soooooo much!!!!! I’m a learning newbie and I’ve spent the best part of a morning trying to work out why my “visited” links would not change for certain properties. Believe it or not, yours is the only site I have found the information regarding “visited” limitations, even W3Schools did not have this. And for that I thank you muchly. Headache over, I’m not a complete coding doughnut. Although I have spent a few hours today altering properties and values and code, worrying that I had a capital letter somewhere it shouldn’t be. Ah well, we live and learn.
Many thanks and kind regards
Martin Eyre
dude. thank you so much for this
“You can only use :visited to change those properties if the link already has them in the “unvisited” or :link state. You can’t use it to add properties that aren’t already present on the link. For example:”
It was driving me insane why I could set a:link border to images but not a:visited.
Giving a style for both states in Stylus makes the a:visited finally change color.
much love from austria
I read that the restrictions and limitations exist to prevent malicious websites from tracking our activities. But aren’t there tons of ways that malicious websites like Google.com could do to track our activities? If yes, why do these styling restrictions still exist?