Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 67

selector:pseudo-class {
...
}
Let's review a few examples of common pseudo-classes.
Anchor pseudo-classes
In a nutshell, pseudo-classes are like smart query operators you can use on certain HTML elements
to further restrict the application of the style. Some pseudo-classes are generic and can be applied
to nearly all selectors; some, instead, only make sense if applied to specific elements. Let's review
pseudo-classes that work well with HTML anchors.
Note Anchors are one of the most basic elements of HTML. Anchor is the more technical
name used to refer to a hyperlink, and the reason why the A is used to identify the element.
An anchor is made of two main parts: display text and underlying URL. When browsers
encounter anchors, they typically render the display text underlined and show the linked
URL in the status bar. When the user clicks the anchor, the browser navigates to the
specified URL.
Usually, browsers render any occurrence of the A element in different ways depending on the
status—the link was visited, is active, or the mouse is hovering. Each state is mapped to a different
pseudo-class. Here's how to fully style an anchor:
a {
text-decoration: none; /* no underlining */
color: #aaaa66;
padding: 0px;
}
a:visited {
text-decoration: none; /* no underlining */
color: #aaaa66;
}
a:hover {
text-decoration: underline;
background-color: orange;
color: black;
padding: 2px;
}
a:active {
text-decoration: none; /* no underlining */
color: #aaaa66;
}