Pseudo-class Selectors
By Stephen Bucaro
Pseudo-classes are used to control properties of html elements that are not available in the
document tree. For example, there is no property in the document tree that relates to an html link
have been visited, however, there are pseudo-classes that respond to the context of an html link.
The :link pseudo-class defines the style for links that have not yet been visited.
The :hover pseudo-class defines the style while the user has the mouse pointer over the link.
The :visited pseudo-class defines the style after the link has been visited.
The :active pseudo-class defines the style while the user has the mouse pointer
over the link between the time the user presses the mouse button and the time
the user releases the mouse button.
Shown below is an example of how you would define a class named first that
applies the anchor pseudo-classes to a link.
a.first:link {color: yellow};
a.first:visited {color: green};
a.first:hover {color: blue};
a.first:active {color: red};
<a class="first" href="http://bucarotechelp.com">
Visit Bucaro TecHelp</a>
In order to keep the pseudo-classes from overwriting each other as the context of a link changes,
a:active must come after a:hover and :hover must come after a:link and a:visited in your style definition.
Also remember when testing that once a link is visited the link will maintain the "visited" style.
More CSS Quick Reference: • Set the Border Color • Set the Background Color • Pseudo-class Selectors • CSS Units of Measurement • position:fixed • Vertical Align an Element • CSS background-origin Positions Background • Use an Embedded Style Sheet • Set the Border Width • Set the box-sizing Property
|