When to use the a:link selector and when not.

What's the difference between a.class:link and a.class?

[danpritchard]

I was trying to teach my ex-girlfriend how to make links in her navigation bar non-underlined. I suggested this stylesheet:

a.navlink:link {
text-decoration: none;
}

However, after setting each A tag in her navigation to the navlink class, she found that only some of the links were properly non-underlined. She got fed up with me at that point so I couldn't diagnose what was causing the problem. I suspect that if I had the chance to add the other A subclasses to that style:

a.navlink:link a.navlink:visited a.navlink:active a.navlink:hover {
text-decoration: none;
}

...the problem would have gone away. But today she found a "cut-and-paste HTML"-type page that suggested a style definition like this :

      a.classname{text-decoration:none}

...and it made me wonder: Exactly when should you use a:link and when should you use just plain a? What are the effects of each method? I was taught to use the a:link pseudoclass and I haven't ever tried using just a.

Any input would be appreciated greatly!

-Dan

PS: I'm not 100% new here; I've posted a couple times before, but couldn't find my username so I'm "new" again.

[keyplyr]

Recommend this as well:

a.girlfriend:attitude {
fed-up: none;
}

...and welcome to WebmasterWorld danpritchard

[grahamstewart]

It's all down to the cascade (the C of CSS).

The general style of an anchor is controlled by the

a

selector.

An anchor has four possible states that you can style individually and these are represented by the four "pseudo-class" selectors -

:link

,

:hover

,

:visited

and

:active

.

However, you only need to use these selectors when you want to specifically alter the style of a particular state.

So, for example, say you wanted all your links to be red, bold and underlined, but you want them to turn blue when you hover over them.

You would use this CSS alter the general style of the links:

a { 
  color:#f00; 
  font-weight:bold; 
  text-decoration:underline; 
} 

and then you would use this CSS to alter the the style for the hover state:

a:hover { 
  color:#00f; 
} 

Note that when you hover over a link it will still be underlined and bold. We don't need to repeat the

font-weight

and

text-decoration

properties because they will cascade down from the definition of

a

.

This cascade effect is basically the same as you would expect if you defined a

class

for

a

- hence the name "pseudo-class" selectors.

[grahamstewart]

BTW I'll help you get back some cred....

If you are styling a navigation link (or any other group of links) then it makes more sense to style the group as a whole, rather than giving each link a class.

e.g. Instead of defining styles for

a.navlink

and doing this in the HTML..

<a class="navlink" href="one.html">one</a> 
<a class="navlink" href="two.html">two</a> 
<a class="navlink" href="three.html">three</a> 
<a class="navlink" href="four.html">four</a> 

it makes for less cluttered code if you group the links with a div (or some other container):

<div class="nav"> 
  <a href="one.html">one</a> 
  <a href="two.html">two</a> 
  <a href="three.html">three</a> 
  <a href="four.html">four</a> 
</div> 

and then you can style them like this...

.nav a { 
  font-weight: bold; 
  color: #c00; 
} 
.nav a:hover { 
  color: #f00; 
} 

[BillPosters]

In addition…

When using pseudo-classes [w3schools.com], it's best to declare them in the a:link, a:visited, a:hover and a:active order. Some browsers have a habit of ignoring some or all parts if that order is not followed.

[danpritchard]

Wow thanks! That makes so much sense!

[grahamstewart]

Good point Bill. The order is important when defining more then one pseduo-class, otherwise override each other in the cascade.

w3c says:

a:link { color: red } /* unvisited links */ 
a:visited { color: blue } /* visited links */ 
a:hover { color: yellow } /* user hovers  */ 
a:active { color: lime } /* active links */ 

Note that the

a:hover

must be placed after the

a:link

and

a:visited

rules, since otherwise the cascading rules will hide the 'color' property of the

a:hover

rule. Similarly, because

a:active

is placed after

a:hover

, the active color (lime) will apply when the user both activates and hovers over the

a

element.

Someone recently suggested that a good way to remember the correct order was to think of it as the LoVeHAte rule.

[DrDoc]

An anchor has four possible states that you can style individually and these are represented by the four "pseudo-class" selectors - :link, :hover, :visited and :active.

...and :focus, which makes it five ;)