:active
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La pseudo-classe CSS :active permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.
Exemple interactif
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>Souhaitez-vous vous abonner à notre chaîne ?</p>
<button class="joinBtn">S'abonner</button>
La pseudo-classe :active est également activée lorsque l'utilisateur·ice emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML <a> et <button> mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément <label> associé.
La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : :link, :hover et :visited lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec :active doit être écrite après les autres : :link — :visited — :hover — :active.
Note :
Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
Syntaxe
:active {
/* ... */
}
Exemples
Liens actifs
CSS
a:link {
color: blue;
} /* Liens non visités */
a:visited {
color: purple;
} /* Liens visités */
a:hover {
background: yellow;
} /* Liens survolés */
a:active {
color: red;
} /* Liens actifs */
p:active {
background: #eee;
} /* Paragraphes actifs */
HTML
<p>
Ce paragraphe contient un lien :
<a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
Le paragraphe sera sur un fond gris quand vous cliquerez dessus ou sur le
lien.
</p>
Résultat
Éléments de formulaire actifs
CSS
form :active {
color: red;
}
form button {
background: white;
}
HTML
<form>
<label for="mon-button">Un bouton :</label>
<button id="mon-button" type="button">
Cliquez sur moi ou sur mon libellé !
</button>
</form>
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |