:active - Sélecteur CSS

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

Compatibilité des navigateur avec :active.

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.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant :active. Introduction de la pseudo-classe :active (version 2.xx du langage CSS).
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Sélecteurs - Niveau 3

  Concernant :active. Pas de modification concernant la pseudo-classe :active.
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Concernant :active. Aucun changement sur la pseudo-classe:active.
  

  29 Septembre 2011

  Document de travail.

  

  

  

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.