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

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 !

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui1451
Non-a element support1 Oui1871
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 ? Oui461 ?
Non-a element support1 ? Oui4 ? Oui1 ?

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

Voir aussi

Étiquettes et contributeurs liés au document

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