CSS Tips

Remember "LoVe/HAte" Linking

Because all a pseudo-classes have the same specificity, order of listing is important. This means the last one listed wins if a link falls into more than one category.

When specifying link pseudo-classes, always do so in this order:

  1. Link
  2. Visited
  3. Hover
  4. Active

Any other order won't work consistently.

Instead of "LoVe/HAte", you would need to think of a new mnemonic if you use the pseudo-classes focus. It would go after visited and before hover in the order of listing.

  1. Link
  2. Visited
  3. Focus
  4. Hover
  5. Active

The focus pseudo-class, applies when an element accepts keyboard events or other forms of text input. You can distinguished it from hover or active by keyboard input. If you tab through the links on a page, each successive link gains focus, not hovering or actuation. A way to signify focus is with a border.

For more information:

<< previous | next >>