A Revised Method Of Defining Link Pseudo Classes

Defining link pseudo-classes in CSS

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:

• Since <a> is not specified, it avoids the problem of having named anchors (i.e. <a name="anchor" id="anchor">this is an anchor<a>) be matched, especially by an a:hover definition. Since Mozilla corrected itself and began matching a:hover to named anchors, there have been multiple bug reports from individuals who do not understand that this is actually correct behavior.
• I finally have a good idea on how to put :focus into my styles and have it cascade properly.
• The system degrades satisfactorily in browsers that don't fully understand this type of style definition. My testing showed that browser support worked as follows:

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.