Question

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.

Answer 1

: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)