:active

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.

Nota: En sistemes amb ratolins de múltiples botons, CSS 3 especifica que la pseudo-class :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.
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
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>.

Vegeu també