Pseudo-classe :active CSS

Définition et utilisation

CSS :active Les pseudo-classes sont utilisées pour choisir et définir les styles des éléments que l'utilisateur active.

:active Les pseudo-classes sont le plus souvent utilisées <a> et <button> éléments. Lorsque l'utilisateur clique sur un lien, ce lien est activé ; c'est aussi le cas pour les boutons.

Astuce :Utiliser :link Définir le style des liens des pages non visitées, utiliser :visited Définir le style des liens des pages visitées, utiliser :hover Définir le style des liens au survol de la souris.

Attention :Dans la définition CSS,:active Doit être placé :hover！(si elles existent) avant de prendre effet !

Exemple

Exemple 1

Choisir et définir le style des liens activés :

a:active {
  background-color: yellow;
}

Essayer par vous-même

Exemple 2

Choisir et définir le style du bouton au clic :

button:active {
  background-color: pink;
}

Essayer par vous-même

Exemple 3

Choisir et définir les styles des éléments <p>, <h1> et <a> au clic :

p:active, h1:active, a:active {
  background-color: yellow;
}

Essayer par vous-même

Exemple 4

Choisir et définir les styles des liens non visités, visités, au survol et activés :

/* Lien non visité */
a:link {
  color: green;
}
/* Lien visité */
a:visited {
  color: green;
}
/* Lien au survol de la souris */
a:hover {
  color: red;
}
/* Lien activé */
a:active {
  color: yellow;
}

Essayer par vous-même

Exemple 5

Définir différents styles pour les liens :

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Essayer par vous-même

Syntaxe CSS

:active {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.

Pages associées

Tutoriel :Lien CSS

Tutoriel :Bouton CSS

Tutoriel :CSS pseudo-classes