« Crystal Reports -- An Informal Survey | Main | How Equals Works in Java »

April 26, 2003

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

Posted by cantrell at April 26, 2003 11:09 PM | References

Comments

Eric Meyer explains "Link Specificity"

http://www.meyerweb.com/eric/css/link-specificity.html

Posted by: Davor at April 28, 2003 10:42 AM

hi . i am an iranian , my job is web designing ,but not professional , in iran web designers are looking for macromedia softwares articles , coz there is not good translated books about macromedia softwares . but your weblog is on of the best references about macromedia .
i am the webmaster of macromediax.com .sometimes i translate your articles ... tanx for your articles ...you are the best

Posted by: macromediax - at May 21, 2004 03:05 AM