Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > active Pseudo-class
Sets the style of a hyperlink element when a user activates it.
selector:active { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :active pseudo-class applies styles to a hyperlink element when the user activates it, either by using a pointing device such as a mouse, or by using the keyboard.
The style(s) are applied when users click on the link, or press enter or the space bar when focus is on the current element.
The syntax for using the :active pseudo-class is straightforward. A selector immediately precedes the pseudo-class.
For example, to change the color of an anchor ( <a>) element when the user activates it:
a:active {
background-color: palegoldenrod; color: #500
}
Setting :active is often used in conjunction with setting styles for other states of a hyperlink: :link, :hover, and :visited.
a:link, a:visited {
color: #005 }
a:active {
background-color: palegoldenrod; color: #500 }
a:hover {
color: #500 }
The above shows how anchor elements are styled in this workshop.
:active is not limited to anchor elements. It can be used on any element that can be configured as a hyperlink, including:
- <button> elements
- <input> elements whose type attributes are buttons
- <area> elements that has an href attribute
In addition, :active can apply to form controls associated with a label element, and to any element that contains an activated element.
The below shows an <a> tag wrapped in a <p> element, and styled to look like a button, as used in many instances in this workshop.
/* HTML */
<p class="showme"><a href="someDemo.aspx" title="Click here to see a demo.">
<img src="/shared/cool.gif" width=15 height=15 align="absmiddle"> Show me </a></p>
/* CSS */
.showme a:link, .showme a:visited {
font: bold 11pt arial; background: navy; color: lime;
text-decoration: none; padding: 8px; border-radius: 12px }
.showme a:hover {
background: maroon; color: yellow;
text-transform: uppercase }
.showme a:active {
background: darkslategray; color: khaki }
Show me
The following demonstrates use of the :active pseudo-class in an embedded stylesheet to set the color of the current active hyperlink on a page.
Show me
:focus :hover :link :target :visited