:active

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:activeChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Non-a element supportChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1
Notes
Support complet 1
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 Support complet 1.0

Légende

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

Voir aussi