Styles actifs

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 10 sur 43.

La pseudo-classe :active applique des styles à un élément lorsqu'il est activé par l'utilisateur, généralement lorsqu'un utilisateur clique sur un élément et maintient le bouton de la souris enfoncé.

Par exemple :

<button class="action-button">Click Me!</button>

Ajoutez du CSS pour styliser le bouton lorsqu'il est actif :

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Lorsque vous cliquez et maintenez le bouton enfoncé, il changera de couleur, passant du bleu au bleu foncé. Cela donne aux utilisateurs un retour visuel indiquant que leur action est enregistrée.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Écrivez le CSS pour la classe .special-link qui ajoute les styles suivants lorsque le lien est actif :

Modifie la couleur du texte en #e74c3c
Ajoute une ombre de texte de 1px 1px 2px rgba(0,0,0,0.3)

Aide-mémoire

La pseudo-classe :active applique des styles à un élément lorsqu'il est activé par l'utilisateur, généralement lors d'un clic et du maintien du bouton de la souris enfoncé.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Cela fournit un retour visuel indiquant que l'action de l'utilisateur est prise en compte.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.