link order in css

Question

Whats the correct order of styling the <a> element (link, visited, hover, active). All are confusing by providing different combination like LVHA, LAHV. Can anybody specify the correct ordering?

Answer 1

Link Visited Hover Active

To quote from the CSS specification :

 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.

Answer 2

You might prefer VLHA ordering as well, which makes no difference. However CSS spec specified LVHA ordering and, in fact, this one is easy to memorize: i LoVeHA!

Answer 3

Here is the best order, especially for pseudo classes. ALV VH HA (I pronounce it Al'va ha')

a              { color: white; text-decoration: none; }                 /* bookmark */
a:link         { color: red; }                                          /* regular link */
a:visited      { color: green; text-decoration: strikethrough; }        /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; }    /* visted hover link */
a:hover        { color: yellow; text-decoration: underline overline; }  /* hover link */
a:active       { color: orange; text-decoration: underline overline; }  /* active link */

This keeps both visited states and both hover states together as well as staying with the specified order. It also allows for styling of bookmarks such as

<a name="bookmark_name">Bookmark Text</a>

which you can target with

<a href="bookmark_name">Link Text</a>

I find this is great for linking right to a section of a site but where you don't want the bookmark to have an automatic hover style, which it will since it's an anchor tag.