Selecting Link Elements Based on Their State

CSS lets you apply formatting to links based on their current state, that is whether they've been visited, whether the visitor is hovering their cursor on top of them, or whatever.

Figure 9.28. You can't specify in the code what state a link will have. It's controlled by your visitors.

To select link elements to format based on their state:

1.	Type a (since a is the name of the link tag). Figure 9.29. Styles for links should always be defined in this order, to avoid overriding properties when a link is in more than one state (say, visited and hovered).
2.	Type : (the colon). Figure 9.30. Links will be red when new and not visited.
3.	Type link to change the appearance of links that haven't yet been or currently aren't being clicked or pointed at. Figure 9.31. Once the link has been visited, it turns orange. Or type visited to change links that the visitor has already clicked. Figure 9.32. If the link gets the focus (generally with the Tab key), it is purple. Or type focus if the link is selected via the keyboard and is ready to be activated. Figure 9.33. When the visitor hovers over the link with the pointer, it is green. Or type hover to change the appearance of links when pointed to. Figure 9.34. As the visitor clicks the link, it turns blue. Or type active to change the appearance of links when clicked.

Tips

• In most browsers, these pseudo-classes (classes for intangible characteristics you can't mark manually) can work with all kinds of elements. IE, up to and including 7, only supports them for the a tag.

• Since a link can be in more than one state at a time (say, simultaneously active and hovered above) and later rules override earlier ones, it's important to define the rules in the following order: link, visited, focus, hover, active (LVFHA).