Wednesday, September 18, 2019

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

No comments:

Post a Comment