CHAPTER 3 CSS SELECTORS AND INHERITANCEPseudo-class Selectors
Problem
You want to style a hyperlink depending on whether it is unvisited, visited, being hovered over by
the mouse, or in the process of being visited.Solution HTML CSS
Patterns HTML CSS
a:link { STYLES }
a:visited { STYLES }
a:hover { STYLES }
a:active, a:focus { STYLES }
Location Pseudo-class selectors work on hyperlinks ().^
Limitations Internet Explorer 6 supports the hover pseudo-class only on hyperlinks. IE7 and all other major
browsers support hover on all elements.
CSS 2.1 defines two additional pseudo-classes: first-child and lang().
first-child selects an element when it is the first child of another element. lang() selects an
element when it has been assigned to the specified human language. These pseudo-classes are not
supported in Internet Explorer 6. Internet Explorer 7 supports first-child, but not lang. I do not
recommend using them until the majority of users use a browser that supports them.
Tips The underline is the standard visual indicator of a hyperlink. If you remove an underline from a
hyperlink, you should style it to look like it should be clicked. In the example, I styled the
hyperlinks to look like simple buttons.
Pseudo-class selectors should be placed in your style sheet in the order listed previously (link,
visited, hover, active, and focus). You can remember the order using the mnemonic Las Vegas
Hells Angels Fight.
A browser displays the active state when a user tabs to a hyperlink. It is also displayed for less than
a second when a user clicks a hyperlink. You can apply a contrasting style to the active pseudo-
class to make the hyperlink “flash” when the user clicks it. This gives the user immediate feedback
that the browser recognized the click.
Variations You can use any combination of CSS styles to style hyperlinks.^
Related to Class Selector, Pseudo-element Selectors