Pseudo-classe CSS :active
La pseudo-classe :active est utilisée pour sélectionner et styliser un lien actif ou tout autre élément. Elle est activée par l'utilisateur.
Un élément devient actif lorsque l'utilisateur clique sur le lien ou l'élément et maintient le bouton de la souris enfoncé.
La pseudo-classe :active est utilisée sur les éléments <a> et <button>. Cette pseudo-classe cible également les éléments contenant un élément activé, ainsi que les éléments de formulaire activés via l'élément <label>.
Les pseudo-classes :link, :hover ou :visited remplacent la définition spécifiée par la pseudo-classe :active. Pour styliser correctement les liens, la règle :active doit être placée après toutes les autres règles liées aux liens (:link, :visited, :hover, :active).
note
Ne confondez pas
:activeavec:focus. Alors que:actives'applique pendant l'activation d'un élément (par exemple, lors d'un clic de souris),:focuss'applique lorsqu'un élément reçoit le focus clavier ou programmatique.
INFO
Sur les systèmes équipés de souris multi-boutons, CSS3 spécifie que l'état :active est déclenché par le bouton d'entrée principal (généralement le bouton gauche de la souris).
Version
Syntaxe
Exemple de pseudo-classe CSS :active
:active {
css declarations;
}Exemple de la pseudo-classe :active :
Exemple de code de pseudo-classe CSS :active
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:active {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<a href="https://www.w3docs.com/">w3docs.com</a>
</body>
</html>Exemple de la pseudo-classe :active avec la balise <a> :
Pseudo-classe CSS :active, exemple de code 2
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:active {
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Dans l'exemple suivant, cliquez sur le texte pour voir comment la couleur change.
Exemple de la pseudo-classe :active avec la balise <div> :
Pseudo-classe CSS :active, autre exemple de code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:active {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Pratique
Quel est l'objectif du sélecteur :active en CSS et où peut-il être utilisé ?