HTML, XHTML & CSS

74
Part III: Taking Precise Control Over Web Pages and Styles
The most common CSS use of pseudo classes is to define a style rule for a
given element in the document tree — a technical term that just means the
browser builds a hierarchical representation for all elements in a document,
much like a family tree, where every element has a parent and may contain a
child. For example, :link is a pseudo class that defines style rules for any
link that hasn’t yet been visited.
The five common pseudo classes that you can use with hyperlinks are
✓ :link defines formatting for links that haven’t been visited.
✓ :visited defines formatting for links that have been visited.
✓ :focus defines formatting for links that are selected by the keyboard
(for example, by using the Tab key) and are about to be activated by
using the Enter key.
✓ :hover defines formatting for links when the mouse cursor hovers over
them.
✓ :active defines formatting for links when they are selected (clicked by
the mouse, or activated by pressing Enter).
The pseudo class name is preceded by a colon (:).
Pseudo classes can be used with
✓ Elements (such as the element that defines hyperlinks)
✓ Classes
✓ IDs
For example, to define the style rules for visited and unvisited links, use the
following syntax:
✓ The following sets the color of any hyperlink pointing to an unvisited
URL to red by using its hexadecimal value:
a:link {color: #FF0000;}
✓ The following sets any hyperlink that points to a visited URL to appear
in the named color green:
a:visited {color: green;}
✓ The following designates unvisited links with a class of internal to
appear in (named color) yellow: (See Chapter 9 for a discussion of CSS
classes.)
a.internal:link {color: yellow;}