Ordering of dynamic pseudo-class blocks in stylesheet
The best order for dynamic link pseudo-class blocks in your stylesheet is (from W3C):
a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */
The order matters because these dynamic pseudo-classes are not mutually exclusive in CSS2 (some of them were in CSS1), and later rules override earlier ones if they clash. In the example above, if a:link
were placed last, all links would be the same colour (red) irrespective of whether they are visited, active or hovered.
Actually this doesn’t only apply to links; in some browsers any element can have :hover
, for example.