A Revised Method of Defining Link Pseudo-classes
This article first appeared on evolt.org on 2002-08-21. 
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:
- 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 ana:hoverdefinition. Since Mozilla corrected itself and began matchinga:hoverto 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
:focusinto 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:
| Browser (platform) | :link |
:visited |
:focus |
:hover |
:active |
|---|---|---|---|---|---|
| IE4+ (PC) | Yes | Yes | No; treated like :active |
Yes | Yes |
| IE 5.x (Mac) | Yes | Yes | Yes | Yes | Yes |
| IE 4.x (Mac) | Yes | Yes | No; treated like :active |
Yes | Yes |
| IE 3.x (PC and Mac) 1 | No | No | No | No | No |
| Mozilla 1.x (PC) | Yes | Yes | Yes | Yes | Yes |
| Netscape 6+ (PC) | Yes | Yes | Yes | Yes | Yes |
| Netscape 4.x (PC and Mac) | Yes | Yes | No | No | No |
| Opera 7.x (PC) | Yes | Yes | No | Yes | Yes |
| Opera 4-6 (PC/Mac) | Yes | Yes | No | No | No |
| Opera 3.62 (PC) 2 | No | No | No | No | No |
| iCab (Mac) | Yes | Yes | No | No | No |
| MSN TV (formerly WebTV) 3 | Yes | Yes | No | No | No |
Table notes:
- The links work, but the body of the text will take the styles of the
:focusdefinition. - This version only tries to support
:linkand:visitedin any event, but suffers from bugs where a link's text-decoration or border changes color but the link text does not. - These results are based on testing with their emulator software, version 2.8 (and below). In the MSN TV CSS documentation, it claims that
:link,:visited,:active, and:hoverare supported. I have never seen the emulator support anything but:linkand:visited. The Style Checker function of the TopStyle CSS editor agrees that only:linkand:visitedare 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/Safari 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.
