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

Posted by Matt Thommes on January 6, 2009 | Post type: Gain

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.

About the author(s)

Matt Thommes is an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Comments

Note: Comments may be viewed by authors, but if you have a more specific question you'd like to ask them, please email matt.thommes@paininthetech.com.