Reminder: CSS "LoVe/HAte" link state declaration order

January 6, 2009 / Filed under: CSS

In order to avoid browser inconsistencies when styling links, it's best to remember a simple mnemonic device:

LoVe/HAte

The capital letters in the phrase above indicate the order in which the different pseudo-classes for anchor elements should appear in your CSS:

a:link
{
  ...
}

a:visited
{
  ...
}

a:hover
{
  ...
}

a:active
{
  ...
}

Follow this order and you should not experience any difficulties styling links in various browsers.

Here's some more information on link specificity from meyerweb.com.

Comments/Mentions