:active CSS sélecteur

Définition de la CSS :active.

La pseudo-classe d'action CSS :active permet d'assigner des propriétés CSS à un élément HTML durant le moment où l'internaute clique sur ce dernier avec sa souris.
La pseudo-classe :active CSS est utilisée entre autre pour les liens (balise ) et les boutons ( balise ou ).

Exemple de syntaxe CSS :active :
a:active{
  /* propriétés Css pour élément actif */ 
}
identifiant:active{
  /* propriétés Css pour élément actif */ 
}

La pseudo-classe CSS :active est associée généralement aux pseudo-classes suivantes CSS quand on parle de lien () :

  • : quand le lien est visité.
  • : quand curseur survole le lien.
  • : quand le lien a le focus.
  • : lien normal et non visité.
Pseudo-classes à utiliser pour charter un lien :
a:link{}
a:visited{}
a:hover{}
a:focus{}
a:active{}
/* L'ordre de déclaration des états doit être respecté c'est celui du W3C */
/* Voir aussi le chapitre sur le déclenchement et l'héritage des états activés */

Conditions d'application de la CSS :active.

La feuille de style :active css est applicable sur la balise HTML ou XHTML , ne pose aucun problème d'interprétation sur la balise A.

Problème d'interprétation de :active en Css.

Avec l'évolution des navigateurs, la propriété de feuille de style :active CSS peut s'appliquer sur l'ensemble des balises HTML, cependant la prise en charge dépend du navigateur.

Conditions d'animation de :active en CSS3.

La pseudo-classe CSS :active est un moyen pour déclencher une animation Css ou déclencher une transition Css.

Règles de syntaxes CSS pour :active.

Info complémentaire sur :active

Attention, la pseudo-classe CSS ":active" a une écriture un peu spéciale, "active" est toujours précédée de ":".

Code CSS : 
a:active {}

La pseudo-classe CSS :active ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "" de votre page :

Exemple d'écriture CSS :active dans une balise STYLE
<STYLE>
  a:active {}
</STYLE>

Attention à l'écriture de :active

Si anciennement la pseudo-classe CSS :active ne concernait que les liens, aujourd'hui ce n'est plus le cas. Il est donc nécessaire de mettre un sélecteur devant, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML.

Dans le cas ci-dessous, l'identifiant est collé à ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS : 
.identifiant:active{ /* Propriétés css */ }
#identifiant:active{ /* Propriétés css */ }

Dans le cas ci-dessous, l'identifiant est espacé de ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent est "identifiant".

Exemple de code :
.identifiant :active{ /* Propriétés css */ } #identifiant :active{ /* Propriétés css */ }

Compatibilités navigateurs du sélecteur :active

Détails des versions de la CSS :active
Résumé du support navigateurs de la CSS :active

Equivalence de la CSS :active en HTML.

La pseudo-classe feuille de style :active css peut remplacer l'attribut ALINK de la balise HTML .

Votre avis sur la définition :active en CSS

Votez pour la définition CSS :active

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/active-css-selector.html Votes: 4.1 / 5 - 46 votes
Cliquez sur une étoile pour voter.