Order of Anchor Selectors in CSS

Remember that the order of pseudo-class definitions on your CSS file matters! I came across someone today who claimed that the links on his page were behaving inconsistently. Sometimes they would follow the a:hover definition, and sometimes they wouldn’t. To make matters worse, although the behavior was inconsistent on all browsers he tested with, the inconsistencies were not consistent from one browser to another! The problem was that his rules were out of order. He had something like this…

A:link    { color: red }
A:hover   { color: yellow }
A:visited { color: blue }

… when it should have been this …

A:link    { color: red }
A:visited { color: blue }
A:hover   { color: yellow }

Links that he had visited were turning blue rather than yellow when he hovered over them. He said it was enough to make him want to go back to JavaScript image roll-overs! Believe me, it’s easier to fix your style sheet. For more information, see:

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes