mozilla

:active

Résumé

La pseudo-classes CSS :active permet de définir l'apparence d'un élément au moment exact où l'utilisateur clique dessus. Cela permet de donner un retour sur l'action, montrant que le navigateur a bien compris la demande. Lorsqu'une souris est utilisée pour interagir, il s'agit généralement du moment où l'utilisateur presse le bouton principal de celle-ci. La pseudo-classe ::active s'applique aussi quand le touche TAB du clavier est utilisée. On trouve souvent cette pseudo-classe avec les éléments HTML <a> et <button>, mais elle ne se limite pas à ces éléments.

Le style défini avec :active peut être écrasé par une autre pseudo-classe destinée aux liens, tel que :link, :hover ou :visited. Afin de correctement styler les liens, vous devez placer la règle :active après les autres règles associées au lien, selon l'ordre suivant : :link:visited:hover:active.

Note : Pour les souris avec plusieurs boutons, la spécification CSS 3 précise que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal, typiquement le bouton situé à gauche sur une souris pour droitier.

Exemple

HTML

<body>
    <h1>Exemple du sélecteur CSS <code>:active</code></h1>
    <p>Le lien suivant deviendra vert le temps que vous cliquez dessus et que vous relachez le clic : <a href="#">Mozilla Developer Network</a>.</p>
</body>

CSS

body { background-color: #ffffc9 }
a:link { color: blue } /* Liens non visités */
a:visited { color: purple } /* Liens visités */
a:hover { font-weight: bold } /* Survole des liens */
a:active { color: lime } /* Liens actifs */

Spécifications

Spécification Statut Commentaire
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

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de l'élément <a> 1.0 1.0 (1.7 ou moins) 4.0 5.0 1.0
Support de tous les éléments 1.0 1.0 (1.7 ou moins) 8.0 7.0 ?
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de l'élément <a> 1.0 1.0 (1.0) 6.0 6.0 1.0
Support de tous les éléments 1.0 1.0 (1.0) ? ? ?[1]

[1] Par défault Safari Mobile n'utilise pas :active sauf si il a un évènement touchstart sur l'élément toucher ou sur <body>.

Voir également

Étiquettes et contributeurs liés au document

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