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 Width
• Set the Letter Spacing
• Set an Element's Display Property
• Specifying Color
• Use an External Style Sheet
• Set the Type of Bullet Used in List
• Set List Bullets Position
• Use Image for List Item Bullets
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set the Word Spacing
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
