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:
• How to Use a CSS ID Selector
• Set the Letter Spacing
• Descendant Selector
• Set the Font Variant
• Set an Element's Padding
• Set the Font Properties
• Pseudo-class Selectors
• Highlight Text
• Set the Border Width
• CSS background-clip Property
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
