Pseudo-classes
Pseudo-classes
//hover over a <div> element to show a <p> element (like a tooltip)
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Is used to define a special state of an element.
Can be used to style an element when a user mouses over it, style visited and unvisited links differently, style an element when it gets focus.
Anchor Pseudo-classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective.