La pseudo-class CSS :active
representa un element (com un botó) que està sent activat per l'usuari. Quan s'usa un ratolí, l'"activació" normalment comença quan l'usuari pressiona el botó primari del ratolí i acaba quan es deixa anar. La pseudo-classe :active
s'usa comunament en elements <a>
i <button>
, però també pot usar-se en altres elements.
/* Selects any <a> that is being activated */
a:active {
color: red;
}
Els estils definits per la pseudo-class :active
seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç (:link
, :hover
o :visited
) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla :active
després de totes les altres regles relacionades amb els enllaços, tal com ho defineix l'ordre LVHA-order: :link
— :visited
— :hover
— :active
.
:active
només s'ha d'aplicar al botó primari; en ratolins destres, normalment és el botó més a l'esquerra.Sintaxi
:active
Exemple
HTML
<a href="#">This link will turn lime while you click on it.</a>
CSS
a:link { color: blue; } /* Unvisited links */
a:visited { color: purple; } /* Visited links */
a:hover { background: yellow; } /* User hovers */
a:active { color: lime; } /* Active links */
Resultat
Especificacions
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of ':active' in that specification. |
Living Standard | |
Selectors Level 4 The definition of ':active' in that specification. |
Working Draft | Sense canvis. |
Selectors Level 3 The definition of ':active' in that specification. |
Recommendation | Sense canvis. |
CSS Level 2 (Revision 1) The definition of ':active' in that specification. |
Recommendation | Sense canvis. |
CSS Level 1 The definition of ':active' in that specification. |
Recommendation | Definició inicial. |
Navegadors compatibles
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 5.0 | 1.0 |
Suport en elements no <a> |
1.0 | (Yes) | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.0) | 6.0 | 6.0 | 1.0 |
Suport en elements no <a> |
1.0 | (Yes) | 1.0 (1.0) | ? | ? | (Yes) [1] |
[1] Per defecte, Safari Mobile no utilitza l'estat :active
a menys que hi hagi un controlador d'esdeveniments touchstart
en l'element rellevant o en el <body>
.