CSS :active Selector

Example

Select and style the active link:

a:active {
  background-color: yellow;
}

---

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!

Version:	CSS1

---

CSS Syntax

:active {
  css declarations;
}

---

More Examples

Example

Select and style a <p>, <h1> and <a> element when you click on it:

p:active, h1:active, a:active {
  background-color: yellow;
}

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;}

Example

Style links with different styles:

a.ex1:hover, a.ex1:active {
  color: red;}

a.ex2:hover, a.ex2:active {
  font-size: 150%;}