scriptygoddess

07 Mar, 2003

Multiple link styles

Posted by: Jennifer In: CSS

Well this isn't really a trick… It's just that I've had to search for this more times than I can count because I couldn't remember the exact way to write it – so I'm posting it here for my future reference.

.stylename a:link {
text-decoration: none;
color: #FF0000; //red
}
.stylename a:visited {
text-decoration: line-through;
color: #00FF00; //green
}
.stylename a:hover {
text-decoration: underline;
color: #0000FF;
background-color: #FFFF66; //blue
}
.stylename a:active {
text-decoration: overline;
color: #FFFF00; //yellow
}

[swiped from here]

(updated: fixed typo – and added a different color and "text-decoration" for each state so you can see which one is which when testing it)

7 Responses to "Multiple link styles"

1 | chris

March 7th, 2003 at 1:49 pm

Avatar

3 quick things.

1. It should be "visited" not visted" but that's obvious. If somebody copy-pastes it won't work.

2. Why does the hover color not show after the link is visited? I haven't used a multiple link style system on my site, but with simple link, visited, and hover defined, visited links no longer hover. I don't get it. Is there a way to force it?

3. What does "a:active" define?

2 | Jennifer

March 7th, 2003 at 3:12 pm

Avatar

re: hover – Did you try specifying the styles in your style sheet in the same order I have in the post? I've heard some people say that things act a little funny if you specify them in a different order… (in fact I just tested this now, and if I moved a:hover first – it stopped "hovering" so try specifying it in the same order as in the post)

a:active is the color the link is while the mouse is clicked (ie the mouse button is down)… if you just click and release really fast – you probably won't even see it… You'll only see that state if you click and hold…

3 | chris

March 7th, 2003 at 3:50 pm

Avatar

Holy crap! It worked. You're a genious. Thank you.

4 | rickie beth

March 7th, 2003 at 4:47 pm

Avatar

I usually make my regular, active, and visited links all the same, only specifying a different style for the hover links. So when I do my stylesheet, I type

a:link, a:active, a:visited {style-goes:here;}

This also solved the problem with the hovers that didn't work properly, for people who want the links to remain the same after being visited.

5 | suebailey

March 10th, 2003 at 8:22 am

Avatar

Just to clarify the hover oddness: if two styles could be applied to the link — i.e. the visited one or the hover one, if you're hovering on a visited link — the CSS will apply the LAST listed style. Hence if you want the hover to work consistently, you should make it the last declaration. HTH.

6 | Ralph

March 22nd, 2003 at 5:23 pm

Avatar

Hmm. what is the difference between that and the method I use, which is:

a.STYLENAME
{
style properties
}

a.STYLENAME:hover
{
hover properties
}

or are they just two roads to one destination?

7 | Rob

April 22nd, 2003 at 1:32 am

Avatar

The url that I've put in is a great little tutorial about multiple link styles using css.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements