Search code examples
cssanchorpseudo-class

CSS: a:link vs just a (without the :link part)

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.
Solution

  • :link selects unvisited links, that is: anchors with an href attribute which have not been visited by the browser (for whatever definition the browser vendor has for "visited").

    If it has :link then it will never match <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.

    a         { color: orange }
a:link    { color: blue }    
a:visited { color: indigo }  
a:hover   { color: green } 
a:active  { color: lime }
      <a>my anchor without href</a>
  <br><br>
  <a href="http://somelinkhere.com">my anchor without href</a>

    (They also have different levels of specificity)