Misleading CSS link declarations

February 24, 2005 / Filed under: CSS

When declaring your link styles in CSS, it’s often misleading what order they should go, in the code.

General CSS theory states that your CSS link declarations should follow this order:

link, visited, hover, active

However, it’s natural tendency (at least for me) to put the hover pseudo–class BEFORE visited, or SECOND in line.

The reason being... When you physically SEE a link in the browser, the first thing you see is it’s link pseudo–class.

Then... you hover over the link, where you see it’s hover pseudo–class.

THEN... you click on the link, where you see it’s active pseudo–class.

Finally, when you return to the original page the link was on, you see the visited pseudo–class of the link.

So, the physical order seems to be: link, hover, active, visited.

However, this is not the case in CSS – for you shall be in for some small surprises if you interchange the order of these declarations.

Mentally designing

It all comes down to "mentally designing," meaning you have to picture your layout and styles in your head FIRST, and then add them to your document. And when I picture it, I picture it in the order it happens. It’s just natural tendency.

visited:hover

And I haven’t even mentioned visited:hover, which is how your link appears

  1. AFTER it has been visited, and
  2. AS it is being hovered over

Where do pseudo–pseudo classes go, in the order?

Comments/Mentions