How to have a different visited link colour in 2 sections of a html?

Question

Hi all, how can I have a different vlink colour within a single html page? I am puting vlink in and it controls all vlink in the whole page. On the other hand, I would like to have a different vlink colour in a specific section. I tried to put the vlink attribute as a style in the tag which is already using a style class in a css file. I tried:

<div class="box" style="vlink:#FFFFFF">

But it messed up the box style and the vlink white colour doesn't come out either. What did I do wrong? Thanks in advance.

Answer 1

You can use different classes for a:visited for different links and get the desired results.

Answer 2

Create one style sheet like below for the all link and class1 for the link where want different color for the link

A:visited - will do the work for you 


<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}
</style>

Check the example : http://www.echoecho.com/csslinks.htm#

Answer 3

My recommendation is to add a class to the containing element where you want the visited links to appear differently so that you don't have to add classes to all the links inside it... For example:

a { text-decoration: none }
a:visited { color: blue }
a:hover { text-decoration: underline; color: green }
.altLinks a:visited { color: red }

Then:

<div class="altLinks">
    <a href="#">This link will be red once it's been visited.</a>
</div>
<a href="#">This link will be blue once it's been visited.</a>
Both links will be green on hover.