Using Basic Selectors - Beginning CSS3 - page 28

6. Create a rule that groups the :hover , :active , and :focus pseudo-classes like this:
a:hover, a:active, a:focus {
color: #63550A;
text-decoration: underline;
}
7. save the style sheet, and test the page again. When you mouse over a link, it turns
deep brown and the text is underlined to give a visual signal that it's clickable.
8. To style links differently in a specific part of the page, you can use a descendant
selector with the pseudo-classes. To keep the code simple, you'll just reverse the
colors for the links in the unordered list, which has the iD nav . You'll also apply the
same color to both visited and unvisited links. To create a descendant selector, you
put the ancestor first—in this case #nav —followed by a space and the selector for
the element(s) you want to affect. Add these styles to basic.css :
#nav a:link, #nav a:visited {
color: #63550A;
}
#nav a:hover, #nav a:active, #nav a:focus {
color: #8D0E6B;
}
9. save the style sheet, and reload basic.html in a browser. The links in the unordered
list at the top of the page are now a different color. The descendant selectors affect
only links that are descendants of the element with the iD nav .
10. Mouse over one of the links in the unordered list. not only does the text change
color, but it's also underlined (see Figure 2-5 ), even though the style rule you created
in step 8 doesn't set the text-decoration property to underline . The underlining
is inherited from the style rule in step 6.
Figure 2-5. The underline is inherited from the rule that applies to all links
11. Turn off the underline by amending the final style rule like this:
#nav a:hover, #nav a:active, #nav a:focus {
color: #8D0E6B;
text-decoration: none;
}