:active - Sélecteur CSS

:active

Résumé des caractéristiques du sélecteur :active

Description rapide
Pseudo classe ciblant l'élément qui est actif (celui qui est cliqué ou touché).
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: REC (recommandation)

Description de la pseudo-classe :active.

Le sélecteur pseudo-classe :active désigne l'élément sur lequel l'utilisateur a cliqué, pendant le temps où le bouton de la souris est enfoncé. Cela ne dure en général qu'une fraction de seconde. Sur un appareil mobile, l'élément est actif tant que le doigt le touche.

Le statut actif se transmet aux parents. Par exemple le formulaire qui contient la zone de saisie active sera lui-même ciblé par la pseudo-classe :active.

La spécification prévoit que seul le bouton principal de la souris est pris en compte par :active mais certains navigateurs comme Chrome   ne font pas de différence entre les boutons.

Remarque : :active peut se trouver en concurrence avec d'autres pseudo-classes, comme :link, :visited, :hover, etc. Conformément aux règles de priorité de CSS, les règles avec :active doivent se situer en dernier pour que l'effet de :active soit visible.
Dans le cas des liens l'ordre d'apparition des règles optimal est le suivant :
    :any-link
    :link
    :visited
    :hover
    :focus
    :active

Voir aussi deux autres pseudo-classes qui sont relatives aux interactions avec l'utilisateur :

  • :focus désigne l'élément activé, même après que le bouton de la souris ait été relâché ou le doigt retiré.
  • :hover désigne l'élément sur lequel le pointeur (souris) est positionné, même si le bouton n'est pas enfoncé.

Exemples d'utilisation de :active.

L'exemple ci-dessous présente un lien et différentes zones de saisie (texte, cases à cocher, boutons). En cliquant sur l'un ou l'autre de ces éléments vous verrez l'effet de la pseudo-classe :active.

Quelques particularités :

  • Le formulaire form est également activé dès que l'une des zones de saisie qu'il contient est active.
  • En cliquant sur un label, ce dernier devient actif, ainsi que la zone de saisie qui lui correspond.
  • Les boutons et les cases à cocher peuvent s'activer avec la souris ou avec la tabulation pour les sélectionner, et ensuite la touche espace.

:active fonctionne pour tous les types d'élément, ici un paragraphe p, même si le clic n'a aucun effet sur ce paragraphe.

Compatibilité des navigateurs.

La prise en charge de la pseudo-classe :active ne pose aucun problème avec les navigateurs actuels, y compris sur les éléments qui ne sont pas des liens (balise a). La définition initiale de :active ne concernait en effet que les balises a.

1
Pseudo-classe
:active
2
Prise en charge sur tous
les types d'éléments
Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Opéra Mobile

Baidu Browser

KaiOS Browser

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la pseudo-classe :active.

Voir aussi...

Plusieurs pseudo-classes permettent de désigner un élément en fonction des actions de l'utilisateur : déplacement de la souris, sélection d'un élément, etc.

    :hover
    Pseudo-classe ciblant l'élément sur lequel se trouve le curseur de la souris.
    :focus
    Pseudo-classe ciblant la zone de saisie qui a le focus.
    :focus-visible
    Pseudo-classe ciblant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).
    :focus-within
    Pseudo-classe ciblant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.