Categories
CSS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.