link order in css

Question

Whats the correct order of styling the element (link, visited, hover, active). All are confusing by providing different combination like LVHA,

Answer 1

Here is the best order, especially for pseudo classes. A L V VH H A (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.

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

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.