Servage Magazine

Have you ever noticed that a link is often one color when you click on it and another color when you go back to that page? That’s because, behind the scenes, your browser is keeping track of which links have been clicked (or “visited,” to use the lingo). The browser keeps track of other states too, such as whether the user’s cursor is over an element (hover state), whether an element is the first of its type, the first or last child of its parent, and whether a form element has been checked or disabled, just to name a few.

In CSS, you can apply styles to elements in these states using a special kind of selector called a pseudo-class selector. It’s an odd name, but you can think of it as though elements in a certain state belong to the same class. However, the class name isn’t in the markup—it’s something the browser keeps track of.

Pseudo-class selectors are indicated by the colon (:) character. They typically go immediately after an element name, for example, li:first-child.

Link pseudo-classes

The most basic pseudo-classes selectors target links (a elements) based on whether they have been clicked. Link pseudo-classes are a type of dynamic pseudo-class because they are applied as the result of the user interacting with the page rather than something in the markup.

:link                        Applies a style to unclicked (unvisited) links
:visited                  Applies a style to links that have already been clicked

By default, browsers typically display linked text as blue and links that have been clicked as purple, but you can change that with a few style rules.

In these examples, I’ve changed the color of links to maroon and visited links to gray. It is common for visited links to be a more muted color than unclicked links.

a:link {
color: maroon;
}
a:visited {
color: gray;
}

Another type of dynamic pseudo-class targets element states that result from direct user actions.

:focus Applies when the element is selected and ready for input

:hover Applies when the mouse pointer is over the element :

:active Applies when the element (such a link or button) is in the process of being clicked or tapped

Focus state

If you’ve ever used a web form, then you should be familiar with how a browser visually emphasizes a form element when you select it. When an element is highlighted and ready for input, it is said to have “focus.” The :focus selector lets you apply custom styles to elements when they are in the focused state.

In this example, when a user selects a text input, it gets a yellow background color to make it stand out from the other form inputs.

input:focus { background-color: yellow; }

Hover state

The :hover selector is an interesting one. It targets elements while the user’s mouse pointer is directly over them. Although you can use the hover state with any element, it is most commonly used with links to change their appearance and give the user visual feedback that an action is possible. This rule gives links a light-pink background color while the mouse hovers over them.

a:hover {
color: maroon;
background-color: #ffd9d9;
}

It is important to note that there is no hover state on touch screen devices such as smartphones and tablets, so this piece of feedback will be lost. That makes it important for links to have clear visual indicators without relying on mouse interactions for discovery.

Active state

Finally, the :active selector applies styles to an element while it is in the process of being activated. In the case of a link, it is the style that is applied while it is being clicked or while a fingertip is in contact with it on a touch screen.

This style may be displayed only for an instant, but it can give a subtle indication that something has happened. In this example, I’ve brightened up the color for the active state (from maroon to red).

a:active {
color: red;
background-color: #ffd9d9;
}

Putting it all together

Web designers commonly provide styles for all of these link states because it is an easy way to provide a nice bit of feedback at every stage of clicking a link (and it usually improves on the browser defaults). In fact, users have come to expect this feedback: that they can see at a glance which links have been followed, that links do something when you point at them, and that they receive confirmation when they are successfully clicked.

When you apply styles to a elements with all five pseudo-classes, the order in which they appear is important for them to function properly. For example, if you put :link or :visited last, they would override the other states, preventing them from appearing. The required order for link pseudo-classes is :link, :visited, :focus, :hover, :active.

It is recommended that you provide a :focus style for users who use the keyboard to tab through links on a page rather than clicking with a mouse. Applying the same style used for :hover is common, although not required.