:active Pseudo-Class

CSS :active Pseudo-Class

The CSS :active pseudo-class selects an element while it is being activated by the user. It is commonly used to provide immediate visual feedback while a link, button, or other interactive element is being pressed or activated.

The :active Pseudo-Class

The :active pseudo-class is added directly to a selector with no space between the selector and the colon.

button:active {
  background-color: #006699;
}

The selector button:active matches a <button> while it is being activated by the user.

How :active Works

The active state normally lasts only for a short period while an element is being activated. For example, when using a mouse, a button can enter the active state when the mouse button is pressed and leave that state when the mouse button is released.

This makes :active useful for creating immediate visual feedback that shows the user's action is being recognized.

Using :active with Links

The :active pseudo-class is commonly used with links to change their appearance while they are being activated.

a:active {
  color: red;
}

<a href="/contact.html">Contact Us</a>

While the link is being activated, its text color changes to red. The active style stops applying when the active state ends.

Using :active with Buttons

Buttons can use :active to provide a pressed appearance while they are being activated.

button {
  padding: 8px 16px;
  color: white;
  background-color: #0088cc;
  border: 0;
}

button:active {
  background-color: #006699;
  transform: translateY(1px);
}

<button type="button">Learn More</button>

The background becomes darker and the button moves slightly downward while it is active, creating a simple pressed effect.

Link Interaction States

Links can have several different states that are selected with pseudo-classes. When rules for these states use the same CSS properties, their order can affect which rule takes precedence.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

A traditional order for link state rules is :link, :visited, :hover, and :active. This allows later rules to override earlier rules when more than one state applies and the selectors have equal specificity.

:active vs :focus

The :active and :focus pseudo-classes represent different states. An element is active while it is being activated, while an element has focus when it is the current target for keyboard input or interaction.

An element may briefly be active during an interaction and remain focused after the active state has ended.

Providing Visual Feedback

Active styles work best when they provide a small but noticeable response to an interaction. Changes to color, background color, border, or position can help communicate that an element is being activated.

.action:active {
  background-color: #006699;
  transform: translateY(1px);
}

The active state should supplement the normal appearance of an interactive element rather than being the only indication that the element can be used.

When to Use :active

Use :active when you want an interactive element to provide immediate visual feedback while it is being activated. It is commonly useful for links, buttons, and other controls that respond to user actions.

Because the active state is usually brief, important information should not be displayed only while :active applies. Use it primarily to reinforce an interaction that is already clear to the user.

Summary

The CSS :active pseudo-class selects an element while it is being activated. It can change colors, backgrounds, borders, position, and other styles to provide immediate visual feedback during an interaction.

The next tutorials cover :link and :visited, which distinguish links based on whether their destinations have been visited.