CSS :active Pseudo-classe
Utilisez la pseudo-classe CSS :active pour styliser un lien actif. Découvrez la pseudo-classe et testez des exemples.
La pseudo-classe CSS :active sélectionne et stylise un élément pendant qu'il est activé par l'utilisateur — le plus souvent le bref instant entre le moment où le bouton de la souris est enfoncé sur un lien ou un bouton et le moment où il est relâché. Cette page explique comment :active fonctionne, pourquoi l'ordre des règles de lien est important, et présente des exemples exécutables pour les liens, les boutons et d'autres éléments.
Un élément devient actif lorsque l'utilisateur appuie sur le bouton principal de la souris (et reste actif jusqu'à ce que le bouton soit relâché). Sur les écrans tactiles, il s'applique pendant que l'élément est touché.
:active est le plus souvent utilisé sur les éléments <a> et <button>, mais il peut cibler n'importe quel élément. Il correspond également à un élément qui contient un élément activé, ainsi qu'aux contrôles de formulaire activés via leur <label>.
Pourquoi l'ordre des règles est important
Les pseudo-classes :link, :visited et :hover peuvent remplacer les styles définis par :active en raison de la façon dont la cascade résout les règles de spécificité égale — la dernière règle correspondante l'emporte. Pour rendre l'état actif visible, listez les règles liées aux liens dans cet ordre exact (à retenir sous l'acronyme LVHA) :
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */Placez :active après :link, :visited et :hover, sinon les règles précédentes le masqueraient.
Ne confondez pas :active avec :focus. Alors que :active s'applique pendant qu'un élément est en cours d'activation (par exemple, lors d'un clic de souris), :focus s'applique lorsqu'un élément reçoit le focus clavier ou programmatique.
Sur les systèmes avec des souris à plusieurs 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 la pseudo-classe CSS :active
:active {
css declarations;
}Exemple de la pseudo-classe :active :
Exemple de code de la 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>Exemple de :active sur un <button> :
Combiner :active avec :hover et :focus est une façon courante de donner aux boutons un ensemble complet d'états interactifs. La règle :active ci-dessous donne au bouton un aspect « enfoncé » pendant que le bouton de la souris est maintenu appuyé.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Points à retenir
:activevs:focus.:activene dure que le temps où l'élément est pressé ;:focusreste tant que l'élément conserve le focus clavier ou programmatique. Utilisez:focus(ou:focus-visible) pour l'accessibilité clavier — ne vous fiez jamais à:activeseul, car il est inaccessible aux utilisateurs qui n'utilisent que le clavier.- Ne supprimez pas tous les retours visuels. Styliser
:active,:hoveret:focusensemble aide les utilisateurs à comprendre qu'un élément est interactif. - La spécificité compte aussi. L'ordre des règles ne résout que les égalités entre sélecteurs de même spécificité. Un sélecteur plus spécifique ailleurs peut toujours l'emporter, donc maintenez vos règles de lien au même niveau de spécificité.