CSS Link States

A link is not always in the same condition. CSS lets you style each one.

1
2
3
4
5
6
7
8

<style>
  a:link    { color: #1a5276; }
  a:visited { color: #6c3483; }
  a:hover   { color: #d94a00; text-decoration: none; }
  a:active  { color: #b00020; }
</style>
<p><a href="#one">An unvisited link</a></p>
<p><a href="">A link to this page, probably counts as visited</a></p>

The order matters: LVHA

Write the rules in this order: Link, Visited, Hover, Active. “LoVe HAte” is the traditional way to remember it.

Why? All four rules have the same strength, so if two apply at once, the later one wins. A visited link under the mouse matches both :visited and :hover. With :hover written after :visited, hover wins, which is what you want.

Privacy limits on :visited

For privacy, browsers only let you change colors in :visited. You cannot change its size, add a background image or run anything based on it, because that would let a page discover which sites a visitor has been to.

Don’t forget focus

Hover is for the mouse. Keyboard users need :focus or :focus-visible too. Style them together:

1
2
3
4

a:hover,
a:focus-visible {
  color: #d94a00;
}

More about focus in CSS Focus Styles.