The The Styles defined by the Note: On systems with multi-button mice, CSS specifies that
the :active
CSS pseudo-class represents an element [such as a button] that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.Try it
:active
pseudo-class is commonly used on and
elements. Other common targets of this pseudo-class include elements that are contained
in an activated element, and form elements that are being activated through their associated
.
:active
pseudo-class will be overridden by any subsequent link-related pseudo-class [:link
,
:hover
, or :visited
] that has at least equal specificity. To style links appropriately, put the :active
rule after all other link-related rules, as defined by the LVHA-order: :link
— :visited
— :hover
— :active
.:active
pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.Syntax
Examples
Active links
HTML
This paragraph contains a link:
This link will turn red while you click on it.
The paragraph will get a gray background while you click on it or the link.
CSS
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eee;
}
Result
Active form elements
HTML
My button:
Try Clicking Me or My Label!
CSS
form :active {
color: red;
}
form button {
background: white;
}
Result
Specifications
HTML Standard # selector-active |
Unknown specification # the-active-pseudo |
Browser compatibility
BCD tables only load in the browser
See also
- Link-related
pseudo-classes:
:link
,:visited
, and:hover
Example
Select and style the active link:
a:active {
background-color: yellow;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The :active
selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
Note: :active MUST come after :hover [if present] in the CSS definition in order to be effective!
CSS1 |
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
:active {
css declarations;
}
More Examples
Example
Select and style a
,
and element when you click on it: p:active, h2:active, a:active {
background-color: yellow;
}
Try it Yourself »
Example
Select and style unvisited, visited, hover, and active links:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Try it Yourself »
Example
Style links with different styles:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Links
CSS tutorial:
CSS Pseudo classes
Why Active is used in CSS?
The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.
What is the purpose of the active class?
Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.
How do you keep active in CSS?
:active denotes the interaction state [so for a button will be applied during press], :focus may be a better choice here. However, the styling will be lost once another element gains focus.
What is difference between focus and active?
:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to. :active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.
background-color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
color: red;
}
font-size: 150%;
}