CODEWITHSUNDEEP
jquerycss
John the Painter
John the Painter

Reputation: 2615

Styling a:visited links

I'm looking to style a:visited links in an article list. Currently this works fine with applying a color in my CSS to a:visited links, however, I am after something a little more. I'd like to add a small dot next to the article title when visited.

I've done some research and looks like anything other than applying a color to a:visited links don't work (background/background-images support has been removed due to privacy issues??) so I'm wondering if anyone has any tips or ideas? jQuery?

Upvotes: 2

Views: 7358

Answers (5)

mickmackusa
mickmackusa

Reputation: 47894

First, the reason you should change your approach to notifying users that a link has already been visited: https://stackoverflow.com/a/10320628/2943403

Because the greater browser industry has taken specific steps to combat security holes by limiting the ways that visited links are modified/styled, if you roll your own javascript implementation it may serve to raise user suspicions of dodginess on your page/site.

Additionally, so long as your "unvisited" text color isn't grey, I think styling visited links as grey should be rather intuitive. For this reason, I would urge you (and future SO readers) to apply this simple pure-css solution and abandon any ideas to style differently.

a{color:red;}

a:visited{color:grey;}
<a href="#">run snippet & click link to see effect</a>

Upvotes: 0

netdigger
netdigger

Reputation: 3789

This works, I know that for a fact since I've tried it. Though it doesnt seem to work in Chrome, it works in IE, so it's not a problem with the CSS.

<style>
a:link
{
    color: #f00;
}
a:visited
{
    color: #0f0;
}
a:hover
{ 
    color: #00f;
}
a:active
{
    color: #ff0;
}
</style>
<a href="x" target="_blank">X</a>

So try this in IE:

a:visited:before
{
     content: ".";
}

If this isnt sufficient, you'll have to add some sort of click event to your links and style them from there, for example (uses jQuery, ugly as hell though):

<a href="javascript:void(0)" onclick="$(this).html('.Link');">Link</a>

Upvotes: 1

David Diez
David Diez

Reputation: 1223

In the case you want to style via script and not plain CSS jQuery doesn't support pseudo class selectors like :visited. You have to use plain javascript instead

$(document).ready(function()
{
  $("#StyleAnchors").click(function()
  {
      //works
      $("a").css("background-color", 'yellow');
      //doesn't works
      $("a:visited").css("background-color", 'red');

  //works
  document.styleSheets[0].addRule('a:visited', 'color: green');
  //document.styleSheets[0].insertRule('a:visited{background-color: #00f;}');
  });
});

http://jsfiddle.net/prJUt/

Upvotes: 2

jeeva
jeeva

Reputation: 1603

Hi you can image for the visited links. For example, 

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}

Upvotes: 0

JuHwon
JuHwon

Reputation: 2063

you can place a <span> element after your <a> element. hide this element. and make a css selector like this a:visited+span... something like this. for more information about css selectors visit http://www.w3schools.com/cssref/css_selectors.asp with jquery u have even more options with selectors e.g. parent.. but you'll find these things in the web im sure.

Upvotes: 0

Related Questions