Link to USGS home page
Internal USGS Access Only

Cascading Style Sheets, Pseudo-Classes

The selector ":name" is a pseudo-class, used to give style to elements based on information known only to the browser (ex: visited links).

You can cause a style to become active when the cursor is hovered over an element. A common use for this is to cause a link to change appearances.

Example

   A:link { color: green; }
   A:visited { text-decoration: overline; }
   A:hover { background: rgb(235,235,235); cursor: crosshair; }
   H2:hover  { color: rgb(235,0,0); }

Explanation

A:link
Change the characteristics of unvisited links.
A:visited
Change the characteristics of visited links.
A:hover
Change the appearance of an element when the cursor is over it. IE applies this only to links, NS 7 honors it for any element.

You MUST define these pseudo classes in this order!

Note: A:hover applies to both <a href="blah" and <a name="blah"! (IE does not do this, though it should, and may in the future)

The most widely supported method for setting hover characteristics for A HREF but not A NAME, would be to combine pseudo classes:

   A:link:hover, A:visited:hover { color: white; background: black; }

Yet another would be to use an attribute selector (currently only supported in Netscape 7):

   A[href]:hover { color: white; background: black; }

Further Resources

  1. The complete specification for Cascading Style Sheets can be found at the World Wide Web Consortium (W3C) site.
  2. Dave Raggett (W3C) provides "A Touch of Style" to steer you clear of most of the problems caused by differerences between different brands and versions of browsers.
  3. Syntax checkers for style sheets: W3C CSS Validation Service and WDG CSSCheck.
  4. Program CSSize (Solaris) converts existing html to HTML 4.01 with embedded style sheet information. Strangely, this program recently became unavailable on the Internet; a Windows version used to be available.
  5. TopStyle is a style sheet editor for Windows ($80).
  6. MaKo is a commercial Web site devoted to CSS support. The owner of the site even gives free CSS help via email!

It is even possible to use Style Sheets to create a graphic and table-free navigation bar.

slide 25

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/css_pseudo-classes.html    
Last modified: Mon Jan 24 12:41:13 EST 2005