Skip to page content or Skip to Accesskey List.


Main Page Content

A Revised Method Of Defining Link Pseudo Classes

Rated 4.36 (Ratings: 13)

Want more?

  • More articles in Code

Bill Mason

Member info

User since: 10 Oct 2000

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 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:

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.


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.

Front-end web development (mostly) and an interest/focus in web accessibility. I also recently co-authored my first book, The Web Professional's Handbook, published by the late great glasshaus.

I've been out of work since October 2001. Be kind and glance over my portfolio....

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.