The :active pseudo-class matches an element while the user is activating it— usually while the primary mouse button is held down or a finger is pressing.
It is most often used on <a> and <button>. It can also match nested content inside an activated element, and form controls activated through a linked <label>.
:active is only the press state. It does not mean “this is the active menu item.” Style the current page with a class or :target pattern instead.
Put link rules in this order: :link → :visited → :hover → :active, so the pressed style can override hover.
selector:active { /* styles while pressed */ }No arguments. Pair it with an element or class selector, for example button:active or a:active.
:activeGive a clear default, then a short pressed feedback style.
:hover for pointer-over feedback (optional).:active last for the press look (darker, slightly inset, and so on).:link, :visited, :hover, :active.| Piece | Required? | Role |
|---|---|---|
| Base selector | Yes | Which element gets the pressed style |
:active | Yes | Matches only while activating |
| Visible change | Yes | Color, scale, or shadow so the press is obvious |
| LVHA order | For links | Lets :active win over :hover |
Click and hold the controls below. Real :active CSS styles apply while the pointer is down.
Each snippet focuses on :active. Use Try It Yourself for a live editor—click and hold in the preview.
Darken a button while it is held down.
button {
background: #2563eb;
color: white;
}
button:active {
background: #1e3a8a;
}:active. The rule matches only while pressing.Style links so the active color wins over hover (MDN pattern).
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background: yellow; }
a:active { color: red; }:link. Unvisited links are blue.:visited. Visited links turn purple.:hover. Yellow background on pointer-over.:active. Red text while pressing overrides hover color.:active is not limited to buttons and links.
p {
background: #e2e8f0;
}
p:active {
background: #cbd5e1;
}p:active. Any press on the paragraph matches.Short-lived state—easy to miss if order or meaning is wrong.
Do not use :active to highlight the nav item for the page you are on. Use a class (or similar) for that.
:active after :hoverOtherwise equal-specificity hover rules can hide the pressed style on links.
CSS applies :active to the primary mouse button (usually the left button), not every mouse button.
The state can flash quickly on tap. Keep the change clear and avoid relying on it alone for critical feedback.
:focus / keyboardKeyboard users need focus styles. Pair with :focus (and consider focus-visible patterns) for full interaction feedback.
:active is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades (Baseline Widely available since about July 2015). Safe for everyday UI press feedback.
Bottom line: Production-ready. Remember LVHA order for links, and do not confuse :active with the current page.
:active last for links.:focus styles too.One line: :active is the brief pressed state—style it after :hover, and do not confuse it with the current page.
Learn how to style checked form controls with CSS.
8 people found this page helpful