Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between :focus and :active selector in HTML
In CSS, :focus and :active are pseudo-class selectors that apply styles based on user interaction. They are commonly used on buttons, links, and form elements but trigger at different moments of interaction.
:focus Selector
The :focus selector applies styles when an element receives focus − either by clicking on it or navigating to it using the Tab key. The focus remains on the element until another element receives focus. This is commonly used on form inputs, buttons, and links.
:active Selector
The :active selector applies styles when an element is being actively pressed (mouse button is down). The style applies only for the duration of the click and disappears as soon as the mouse button is released.
Key Differences
| Feature | :focus | :active |
|---|---|---|
| Triggers When | Element receives focus (click or Tab) | Element is being pressed (mouse down) |
| Duration | Stays until focus moves to another element | Only while mouse button is held down |
| Keyboard Trigger | Yes (Tab key) | Yes (Enter/Space on focused element) |
| Common Use | Form inputs, accessibility outlines | Button press feedback, link click style |
Example
The following example demonstrates both :focus and :active selectors on buttons and links ?
<!DOCTYPE html>
<html>
<head>
<title>Focus vs Active Selector</title>
<style>
button {
border: 2px solid black;
padding: 8px 16px;
background: white;
cursor: pointer;
margin: 5px;
}
/* :focus - stays after clicking until focus moves */
button.focus-demo:focus {
border: 2px dotted red;
background: #ffe0e0;
}
/* :active - only while mouse is pressed */
button.active-demo:active {
border: 2px solid blue;
background: #e0e0ff;
}
a {
color: black;
font-size: 16px;
margin: 10px;
}
a:focus {
outline: 2px dotted red;
}
a:active {
color: red;
}
</style>
</head>
<body>
<p>Click the buttons and observe the difference:</p>
<button class="focus-demo">:focus (click then click elsewhere)</button>
<button class="active-demo">:active (hold mouse down)</button>
<p>
<a href="#">Link (:focus stays, :active on press)</a>
</p>
</body>
</html>
When you click the first button, the red dotted border stays even after releasing the mouse (focus persists). When you press and hold the second button, the blue border appears only while the mouse is down and disappears on release.
Conclusion
:focus applies styles that persist as long as the element has focus (until the user clicks elsewhere or tabs away). :active applies styles only during the moment of activation (while the mouse button is held down). Both are essential for creating accessible and interactive user interfaces.
962 Views
