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!