views:

138

answers:

3

So we're required to use the following order for CSS anchor pseudo-classes

a:link    { color: red }    
a:visited { color: blue }  
a:hover   { color: yellow } 
a:active  { color: lime }  

But my question is why bother with the a:link part? Rather, is there any advantage to the above (other than perhaps clarity) over:

a { color:red; } /* notice no :link part */
a:visited { color: blue; }
etc.,etc.
+8  A: 

It stops it matching: <h1><a name="foo">A foo to be linked to</a></h1>

(Although you should be using <h1 id="foo">A foo to be linked to</h1> these days.)

Aside from that, it does make it clearer what it is for.

David Dorward
can you explain the stops it matching part a bit more please? Not sure I understand.
Rob
`a` matches all anchors. `a:link` matches anchors that are unvisited links. `a:visited` matches anchors that are visited links. `<a name="foo">` is an anchor that is not a link of any kind.
David Dorward
+4  A: 

Just "a" refers to ALL possible links (unvisited, visited, hovered, and active), whereas "a:link" just refers to normal unvisited links.

If you use "a" instead of "a:link", you are setting the default CSS for ALL links to whatever "a" is set to. In this specific case, since you specify each possible pseudoclass, it essentially doesn't matter whether you say "a:link" or just "a"

So in the first group, where you write out all the pseudoclasses (a:link, a:visited, etc), you are specifying the CSS for each possible case WITHIN "a"

a:link    { color: red }     //set unvisited links to red 
a:visited { color: blue }    //set visited links to blue
a:hover   { color: yellow }  //set hovered links to yellow
a:active  { color: lime }    //set active links to lime

In the second group, where you just write "a", you are actually setting the default CSS for all links to what you write in the first line, then redefining the CSS for the other pseudoclasses

a    { color: red }          //set ALL links to red!
a:visited { color: blue }    //hm, never mind, let's set visited links to blue
a:hover   { color: yellow }  //hm, never mind, let's set hovered links to yellow
a:active  { color: lime }    //hm, never mind, let's set active links to lime
Yongho
A: 

http://www.w3schools.com/css/css_pseudo_classes.asp

:link is when the link is unvisited. So when there is an anchor with a href attribute and the user have never been on the page behind the anchor.

remi bourgarel
That doesn't answer the question.
David Dorward