Misleading CSS link declarations Feb24 '05

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?

Categories: CSS

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from 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.

Contact Matt

Similar Entries

Stats

13 unique visits since August 2008

Syndicate

Advertisements