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
- AFTER it has been visited, and
- AS it is being hovered over
Where do pseudo–pseudo classes go, in the order?
Categories: CSS 
Add Feedback (view all)
Leave feedback
Popular Pages
- Fast rounded corners in Photoshop (7423 recent visits)
- PHP – passing variables across pages (2558 recent visits)
- JavaScript set selected on load (2413 recent visits)
- Removing all child nodes from an element (1828 recent visits)
- Firefox 3 smart address bar: wildcard search (1755 recent visits)
- iPod songs out of order? (1314 recent visits)
- Britney - Everytime piano tab (1137 recent visits)
- MySQL LEFT JOIN syntax (884 recent visits)
- Firefox 3 smart address bar: wildcard search (722 recent visits)
- Date difference in MySQL (651 recent visits)
Similar Entries
- Swap banner image with CSS and PHP (190 recent visits)
- CSS class, or HTML tag? (4 recent visits)
- CSS font-size dialogue! (31 recent visits)
- CSS print style sheet (5 recent visits)
- CSS adjacent sibling selectors and IE 6 (83 recent visits)
- CSS "classitis" for a printing issue (0 recent visits)
Stats
3 unique visits since July 2008