Search code examples
htmlcsspseudo-class

link order in css

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?

Solution

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