The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.
This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules. In order to style appropriately links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
Note: On systems with multi-button mice, CSS 3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
<h1>:active CSS selector example</h1>
<p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
Thanks! Please check your inbox to confirm your subscription.
If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
Why does MDN look different?
MDN is changing to focus just on documenting web technologies. All the same great content is still here; we’re just changing some visual elements and navigation, to help you more quickly find the web technology docs you’re looking for.
But don’t worry, MDN and Mozilla are still together! In fact, we're updating MDN’s look to reflect Mozilla's new logo and colors.