:active CSS Pseudo Class
Description
The :active
pseudo-class defines the style of the active element. This is the state of the element that occurs between the click and release of the mouse button. Mostly applied to links and buttons, but not limited to them.
Syntax
element:active { … }
Example
<p>Hold your mouse button over the links to view the :active pseudo class in action. Link 3 has no :active pseudo class.</p>
<a class="link1" href="#">Link 1</a>
<br>
<a class="link2" href="#">Link 2</a>
<br>
<a href="#">Link 3</a>
.link1:active {
background: blue;
color: white;
}
.link2:active {
font-weight: bold;
border: 1px solid red;
text-decoration: none;
}
Notes
Internet Explorer prior to version 8 and Opera prior to version 7 support :active
for links only.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | X |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited