Defining link pseudo-classes in CSS

In the classic case of defining your link pseudo-class styles, this has been the traditional way to do it:

a:link { /*styles*/ }

a:visited { /*styles*/ }

a:hover { /*styles*/ }

a:active { /*styles*/ }

As the CSS2 specification observes, the order of the pseudo-classes is important so that the cascading rules present the correct styles to the browser.

Recently, I began using another method derived from some notes by David Baron. The rules are as follows:

:link:focus, :visited:focus { /*styles*/ }

:link { /*styles*/ }

:visited { /*styles*/ }

:link:hover, :visited:hover { /*styles*/ }

:link:active, :visited:active { /*styles*/ }

I like this style for several reasons:

Does the browser display styles correctly using the new pseudo-class rule method?
Browser (platform):link:visited:focus:hover:active
IE4+ 1 (PC)YesYesNo; treated as :activeYesYes
IE 5.x (Mac)YesYesYesYesYes
IE 4.x (Mac)YesYesNo; treated as :activeYesYes
IE 3.x (PC and Mac) 2NoNoNoNoNo
Mozilla 1+ (PC) 3YesYesYesYesYes
Netscape 6+ (PC) 3YesYesYesYesYes
Netscape 4.x (PC and Mac)YesYesNoNoNo
Opera 7.x (PC)YesYesNoYesYes
Opera 6.x (PC), 5.0 (Mac)YesYesNoNoNo
Opera 3.62 (PC) 4NoNoNoNoNo
iCab (Mac)YesYesNoNoNo
MSN TV (formerly WebTV) 5YesYesNoNoNo

Table notes:

  1. IE 4 (PC): I do not have a local install handy to test this with. This result is from David Baron's original page of notes.
  2. IE 3: The links work, but the body of the text will take the styles of the :focus definition.
  3. Mozilla 1+, Netscape 6+ (PC): I presume these behave the same on all platforms, but do not have installs on other platforms to test with.
  4. Opera 3.62: This version only tries to support :link and :visited in any event, but suffers from bugs where a link's text-decoration or border changes color but the link text does not.
  5. MSN TV: These results are based on testing with their emulator software, version 2.6. In the MSN TV CSS documentation, it claims that :link, :visited, :active, and :hover are supported. I have never seen the emulator support anything but :link and :visited. The Style Checker function of the TopStyle CSS editor agrees that only :link and :visited are supported.

Wrapup

As the table shows, only Opera 5/6 actually lose functionality that they otherwise have using the traditional link pseudo-class style. In the new system, they no longer understand :active and :hover. In other browsers, any functionality that doesn't work is something that didn't work under the traditional system anyway. Given that I can live with the Opera problem, I personally have begun using this system on various sites.

Anyone with corrections or additions, please feel free to comment. Just offhand, I would be interested in hearing first-hand how this system works in Konqueror and an actual MSN TV setup. David Baron maintains a test page that you can use.

Thank you to David Baron for permission to use his original work as the basis for this article.