How do you change the color of visited, active and hover links in css? I need to know how to change it for each individual link. Not for all the links on the page.

3 answers

1
point
This was chosen as the best answer
.class1 a:link {color: blue;}
.class1 a:visited {color: purple;}
.class1 a:hover {color: green;}
.class1 a:active {color: blue;}

where class1 is the class for the link container.

e.g

<li class="class1"><a href="home.htm">Home</a></li>
Answered over 7 years ago by Tony Crockford
  • im using id's so would this work? #TOPLINK a.active {color: blue} canyonchase1 over 7 years ago
  • yes, id would work as well Tony Crockford over 7 years ago
  • except an ID can only be used once per page. so #toplink would have to be on the ul, I'll post an example Tony Crockford over 7 years ago
  • i already have all the ids used for positioning the links and stuff so how would i just add this into it? can i also just make all the links on the page use like the a:active{color red} even though their already using commands? canyonchase1 over 7 years ago
2
points
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <title>test</title>

        <style type="text/css" media="screen" charset="utf-8">

            #toplink a:link {color: blue;}
            #toplink a:visited {color: purple;}
            #toplink a:hover {color: green;}
            #toplink a:active {color: blue;}

            #toplink{list-style-type: none;}
            #toplink li{ display:inline; border: 1px solid #ccc; margin: 0 5px;}
            #toplink a{padding: 5px; text-decoration: none;}
        </style>    
</head>
<body>

    <ul id="toplink">
        <li><a href="http://www.boldfish.co.uk">Home</a></li>
        <li><a href="#">About us</a></li>
    </ul>
</body>

see live:

http://www.boldfishclient.co.uk/doctype/testform.html

Answered over 7 years ago by Tony Crockford
  • i changed all my id's to class's. but when i put .toplink a:active {color:red} it didnt work for that link. what am i doing wrong? canyonchase1 over 7 years ago
2
points

You'll hate me for this and probably downgrade all my answers, but I have no idea what else you have done with your code that might have caused this.

Without seeing your html and css it's impossible to guess what else might be affecting the bit you're looking at.

but a:active is very hard to see - it only shows up if you click the link and then go back - the default behaviour is a dotted border round the link you clicked (made active), and most users never see the active state.

are you trying to do something else? e.g.like make the link for the page you are on look different?

Answered over 7 years ago by Tony Crockford
  • i made my links into classes. heres like an example .TOPLINK {font-size: 7px; position: absolute; top: 10px; left: 35px} then i have at a different spot in my css file .TOPLINK a:active {color: red} is there anything wrong with this? canyonchase1 over 7 years ago
  • no that's fine, but as I said, the active color rarely shows up in browsers these days - at best you get hover and visited. You need to explain what you hope to happen when you use a:active. Tony Crockford over 7 years ago