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:
<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.:focus
into my styles and have it cascade properly.Browser (platform) | :link | :visited | :focus | :hover | :active |
---|---|---|---|---|---|
IE4+ 1 (PC) | Yes | Yes | No; treated as :active | Yes | Yes |
IE 5.x (Mac) | Yes | Yes | Yes | Yes | Yes |
IE 4.x (Mac) | Yes | Yes | No; treated as :active | Yes | Yes |
IE 3.x (PC and Mac) 2 | No | No | No | No | No |
Mozilla 1+ (PC) 3 | Yes | Yes | Yes | Yes | Yes |
Netscape 6+ (PC) 3 | 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 6.x (PC), 5.0 (Mac) | Yes | Yes | No | No | No |
Opera 3.62 (PC) 4 | No | No | No | No | No |
iCab (Mac) | Yes | Yes | No | No | No |
MSN TV (formerly WebTV) 5 | Yes | Yes | No | No | No |
:focus
definition.: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.: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.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.