: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. y5r5m

The :active pseudo-class is a dynamic class which applies when an element is being activated by the . 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 experiences, as the page will give to the upon clicking an element. Without this kind of , the 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: :hover. Refer to the individual entries of each of the pseudo-classes for more information and examples.

An element can be both :link and :active).

When the four link styling pseudo-classes are used, they are preferably used in the following order: :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 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 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.

a:active {
    background-color: black;
    color: white;
}

p:active {
    border: 2px dotted BlanchedAlmond;
}

body:active {
    border: 5px solid
}