Cascading Style Sheets/Pseudo Classes
From WikiKnowledge
| :link | This represents an unvisited link. |
| :visited | This represents a visited link. |
| :hover | This class is the item the users mouse is currently pointing at. It can be used on any element however Internet Explorer 6 only recognizes it with links. |
| :active | |
| :focus | Elements which currently have focus. |
| :root | This represents the root element. This is for use with XML files as in HTML/XHTML files the root element is always <html> |
| :first-child | Elements that are the first child of another element. |
| :last-child | Elements that are the last child of another element. |
| :empty | Elements that have no child elements. |
| :not | |
| :target | Applys to the HTML anchor that is currently targeted. |
[edit] Hyperlinks
The first four Pseudo Classes namely :link, :visited, :hover and :active are commonly used to control the look of hyperlinks.
Here is a simple example of a link
<a href="http://www.example.com">Click here</a>
and here is some CSS rules to style the link:
a:link{
text-decoration: none;
}
a:visited{
color: red;
}
a:hover{
text-decoration: underline;
}
a:active{
color: orange;
}
In the above example all links will appear without the normal underline. Links that the user has visited will appear in red. Links that the mouse is hovering over will be underlined. And finally, links that the user has clicked on (but has not yet released the mouse button) will be in orange.
Note that it is important that the rules for links are always given in the order shown, i.e. :link, :visited, :hover and :active. This is because a link which is active is also being hovered over.
Also note that Internet Explorer will only apply the :hover and :active Pseudo Classes to links, while other web-browsers will correctly apply those styles to other elements also.
