Main Page Content
A revised method of defining link pseudo-classes
Rated 4.36 (Ratings: 13) (Add your rating)
Log in to add a comment
(12 comments so far)
Bill Mason
User since: October 10, 2000
Last login: April 15, 2007
Articles written: 5
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+ 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 |
Table notes:
- 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.
- IE 3: The links work, but the body of the text will take the styles of the
:focus definition.
- 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.
- 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.
- 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
: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.
