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>.