CODEWITHSUNDEEP
javascripthtmlcss
seroth
seroth

Reputation: 647

Not able to change visited color in <span> in <a>

I have a link on a plain page.

<a href='go_somewhere.html'>
    <span>Link Title</span>
</a>

I try to change the CSS of the link using

a span:link{ color:blue !important; }
a span:visited{ color:purple !important; }
a span:hover{ color:yellow !important; }
a span:active{ color:blue !important; }

The link, hover, and active states works fine but the visited state does not work.

I have also tried:

a:link span{ color:blue; }
a:visited span{ color:purple; }
a:hover span{ color:yellow; }
a:active span{ color:blue; }

That did not work either.

I am using a COTS product and cannot add id's or classes. I have to use what is there. Luckily, I want it to apply to ALL hyperlinks. Any help/advice would be greatly appreciated. There is a possibility to use plain JavaScript with this product but that's it.

Thanks in advance.

Upvotes: 1

Views: 2022

Answers (2)

dacha
dacha

Reputation: 1

It is because browsers implemented privacy to limit the amount of information that can be obtained from visited links.

For reference, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector#Little_white_lies

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

It should be in the a tag itself not in span:

a:link span{ color:blue; }
a:visited span{ color:purple;}
a:hover span{ color:yellow;}
a:active span{ color:blue;}

No need to use !important.

Update: as per comment:

Use # in href attribute and call your javascript code in onclick attribute:

<a href="#" onclick="javascript:window.open('http://www.google.com','mywindowtitle','width=500,height=150');"><span>Title HERE</span></a>

Upvotes: 4

Related Questions