HTML and CSS Reference
In-Depth Information
Figure 3-50
Revised navigation list
reform
a
tted
navigation list
Using Pseudo-Classes and Pseudo-Elements
Without underlines, there is no visual clue that the links in the navigation list act as
hypertext. Tammy has seen Web sites in which links are underlined or highlighted only
when the mouse pointer hovers over the linked text. This type of effect is called a rollover
effect because it is applied only when a user “rolls” the mouse pointer over an element.
Tammy would like you to add a rollover effect to the navigation list.
Pseudo-Classes
Rollover effects can be created using pseudo-classes. A
pseudo-class is a classifi cation
of an element based on its current status, position, or use in the document. Styles for
pseudo-classes are created using the syntax
selector
:
pseudo-class
{
styles
;}
where
selector
is an element or a group of elements within a document,
pseudo-class
is the name of a pseudo-class, and
styles
are the style properties
applied to that selector pseudo-class. Pseudo-classes are organized into dynamic and
structural classes. A dynamic pseudo-class
changes with a user's actions. For example,
the
visited
pseudo-class indicates whether a hypertext link previously has been visited
by the user. To display the text of all such links in red, you would apply the following
style rule to the
a
element:
a:visited {color: red;}
To change the text color to blue when users hover the mouse pointer over the link,
you would add the following style rule:
a:hover {color: blue;}
Figure 3-51 lists the other dynamic pseudo-classes supported by CSS.
