:active

:active is a CSS pseudo-class. It specifies and selects an element based on a state—the active state—and is used to apply styles to an element when it matches that state.

The :active pseudo-class is a dynamic class which applies when an element is being activated by the user. It is often used to target and style an element when it’s active (as the name suggests). More specifically, it targets an element (usually an anchor link <a>) between the time it is clicked on and the time it is released.

Styling an element in its active state allows for better user experiences, as the page will give feedback to the user upon clicking an element. Without this kind of feedback, the user may assume that her action was unsuccessful, as she would have no visual cues to confirm whether the click was successful or not, and may end up clicking the element multiple times in a row.

The :active pseudo-class is mostly used to style anchor links, but it can also be used to style any other element on the page, even the root element (html). For example, the following example will apply a light gray background to all paragraphs of text while they are being clicked:

p:active {
    background-color: #aaa;
}
                

When :active is used to style links, it is preferred that it is used in conjunction with three other pseudo-classes that are also used to style different link states: :link, :visited, and :hover. Refer to the individual entries of each of the pseudo-classes for more information and examples.

Trivia & Notes

An element can be both :visited and :active (or :link and :active).

When the four link styling pseudo-classes are used, they are preferably used in the following order: :link, :visited, :hover, and :active. For example:

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

The above order can be easily memorized using mnemonics like “Last Vintage Hat Available”. You can create your own one over at spacefm.com.

This order is preferred because otherwise some state styles could override other state styles, thus making them not work as expected. For example, if you were to style the :visited state last, it would override the :hover and :active states of the link, and the :visited styles would apply regardless of whether the link is being hovered or clicked.

In addition to the four states mentioned, you can (read: should, for better accessibility) also style links when they are focused. To do that, the :focus pseudo-class is used. And to remember the order, you could add “fur” in between the previous sentence: “Last Vintage Fur Hat Available”. You can read more about the :focus pseudo-class in its entry.

On systems with more than one mouse button, :active applies only to the primary activation button (typically the “left” mouse button), and any aliases thereof.