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.

/* ne cible <a> que lorsqu'il est activé */
/* par exemple quand on clique dessus */
a:active {
  color: red;
}

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. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément <label> associé.

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ées 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

Exemples

Liens actifs

CSS

a:link { color: blue; }          /* Liens non visités */
a:visited { color: purple; }     /* Liens visités */
a:hover { background: yellow; }  /* Liens survolés */
a:active { color: red; }         /* Liens actifs */

p:active { background: #eee; }   /* Paragraphes actifs */

HTML

<p>Ce paragraphe contient un lien :
  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
  Le paragraphe sera sur un fond gris quand vous cliquerez dessus
  ou sur le lien.
</p>

Résultat

Éléments de formulaire actifs

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

HTML

<form>
  <label for="mon-button">Un bouton :</label>
  <button id="mon-button" type="button">Cliquez sur moi ou sur mon libellé !</button>
</form>

Résultat

Spécifications

Spécification État Commentaires
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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 4Opera Support complet 5Safari Support complet 1WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android ?
Non-a element supportChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : PhilippeV,