mozilla
Vos résultats de recherche

    CSS : la pseudo-classe :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

    Contributors to this page: FredB
    Dernière mise à jour par : FredB,