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

2 Responses to Order of Anchor Selectors in CSS

  1. 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