La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci. La pseudo-classe :active est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML <a> et <button> mais n'est pas restreinte à ceux-ci.

La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : :link, :hover et :visited lorsqu'elles sont utilisés dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec :active doit être écrite après les autres : :link:visited:hover:active.

Note : Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.

Syntax

:active { style properties }

Exemples

CSS

body { background-color: #ffffc9; }
a:link { color: blue; } /* unvisited links */
a:visited { color: purple; } /* visited links */
a:hover { font-weight: bold; } /* user hovers */
a:active { color: lime; } /* active links */

HTML

<body>
  <p>Le lien suivant deviendra vert clair pendant 
     le clic : <a href="#">Mozilla Developer Network</a>.
  </p>
</body>

Résultat

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de ':active' dans cette spécification.
Standard évolutif  
Selectors Level 4
La définition de ':active' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de ':active' dans cette spécification.
Recommendation Aucune modification.
CSS Level 2 (Revision 1)
La définition de ':active' dans cette spécification.
Recommendation Aucune modification.
CSS Level 1
La définition de ':active' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 4.0 5.0 1.0
Sur les éléments différents de <a> 1.0 1.0 (1.7 ou moins) 8.0 7.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.0) 6.0 6.0 1.0
Sur les éléments différents de <a> 1.0 1.0 (1.0) ? ? (Oui) [1]

[1] Par défaut, Safari Mobile n'utilise pas l'état :active sauf lorsqu'il y a un gestionnaire d'événement touchstart sur l'élément correspondant ou sur <body>.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, gmetais, tregagnon, adevoufera, teoli, louuis, FredB, Delapouite, the prisoner
 Dernière mise à jour par : SphinxKnight,