CSS :active Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 123 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :active selector in CSS is used to style an element when it is being activated by the user. This typically occurs when the element (such as a button or link) is clicked or tapped.

The :active pseudo-class applies styles only while the user is actively interacting with the element, providing visual feedback to indicate the interaction.

💡 Syntax

The signature of the :active Selector is as follows:

Syntax

Copied

element:active {
    /* CSS properties */
}

The :active selector can be used on interactive elements like <button>, <a>, <input>, or any other element that responds to user interaction.

📝 Example

Here is an example of how to use the :active selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :active Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Click Me!</button>
    <a href="#">Active Link</a>
</body>
</html>

🎨 CSS

CSS

Copied

/* Default styles for the button and link */
button, a {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Style when the button or link is active (clicked) */
button:active, a:active {
  background-color: #0056b3;
  transform: scale(0.98);
}

In this example:

A button and a link are styled with a blue background and white text.
When the user clicks the button or the link, the :active selector changes the background color to a darker shade of blue and applies a slight shrinking effect using transform: scale(0.98).

💬 Usage Tips

The :active state lasts only as long as the user holds down the mouse button or touch gesture on the element. Once the click is released, the element returns to its normal state.
Use :active in combination with other pseudo-classes like :hover or :focus for a smooth interactive experience.
CSS
Copied
```
button:hover, button:focus {
    background-color: #0056b3;
}
button:active {
    background-color: #004080;
}
```
The :active selector can also be used for form elements, navigation links, and custom interactive components like sliders or buttons.

⚠️ Common Pitfalls

Timing of :active: Keep in mind that :active applies only during the actual interaction (i.e., while the mouse button or touch gesture is down). It can be easy to overlook this short duration, so test the interaction thoroughly.
Precedence of pseudo-classes: In some cases, the order of CSS pseudo-classes matters. For example, :hover can override :active styles if declared after it. To avoid this, ensure :active is styled appropriately or placed after :hover if needed.
CSS
Copied
```
a:hover {
    background-color: #007BFF;
}

a:active {
    background-color: #0056b3; /* This will still apply when active */
}
```

🎉 Conclusion

The CSS :active selector is a valuable tool for giving users visual feedback when interacting with clickable elements on a webpage. By styling elements with :active, you can improve the user experience by making interactions more intuitive and engaging. Just remember that the :active state only lasts for the duration of the interaction, so combine it wisely with other selectors like :hover for a smooth and dynamic user interface.