:hover :focus :active et :visited
Mettez en forme les états interactifs des liens et des boutons à l’aide des pseudo-classes CSS les plus courantes.
:hover :focus :active et :visited est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les pseudo-classes ?
Les pseudo-classes sélectionnent les éléments selon leur état ou leur relation avec d’autres éléments. Elles commencent par deux-points simple : et ne nécessitent pas l’ajout d’attributs au HTML.
:hover
:hover s’applique lorsque le pointeur de l’utilisateur se trouve au-dessus d’un élément. C’est le sélecteur d’état interactif le plus courant.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus s’applique lorsqu’un élément reçoit le focus (avec la touche Tab du clavier ou par programmation). Il est essentiel pour l’accessibilité.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible est une version plus intelligente de :focus : elle n’affiche l’anneau de focus que lorsque le focus a été obtenu au clavier, et non à la souris. Les utilisateurs du clavier disposent ainsi d’indicateurs de focus sans anneau lors des clics de souris.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within s’applique à un élément lorsque l’un de ses descendants possède le focus. Cette pseudo-classe est utile pour styliser les conteneurs de formulaires ou les barres de recherche lorsqu’ils sont actifs.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active s’applique pendant l’activation d’un élément, lors d’un clic de souris ou d’une interaction tactile. Elle fournit un retour visuel pour les éléments interactifs.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited applique des styles aux liens que l’utilisateur a déjà visités. Pour des raisons de confidentialité, seul un ensemble limité de propriétés peut être stylisé avec :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Ordre des états des liens (LVHA)
Lorsque vous stylisez les quatre états d’un lien, respectez l’ordre LVHA afin d’éviter les problèmes de spécificité : Lien, Visité, Hover, Actif.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Survol sur les appareils tactiles
Les écrans tactiles n’ont pas d’état de survol identique à celui des souris. :hover peut être activé brièvement lors d’une pression. Pour les interactions propres au tactile, utilisez :active ou la requête multimédia @media (hover: none).
Combinaison des états
Vous pouvez enchaîner les pseudo-classes pour styliser plusieurs états simultanément :
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transition des états de survol
Créez des effets de survol fluides en utilisant les transitions sur l’état de base (et non sur l’état :hover), afin que la transition se joue dans les deux directions :
<button class="btn demo-hover">Hover transitions smoothly</button>
Vérification rapide
Quelle pseudo-classe affiche les styles de focus uniquement pour la navigation au clavier, et non lors des clics de souris ?
Récapitulatif
:hover s’active lorsque le pointeur survole l’élément ; :focus, lorsque le champ reçoit le focus ; :active, pendant un clic ; :visited, pour les liens visités. Utilisez :focus-visible pour les anneaux de focus réservés au clavier. Respectez l’ordre LVHA pour les états des liens. Fournissez toujours des indicateurs de focus visibles pour garantir l’accessibilité.
Questions Fréquemment Posées
La leçon « :hover :focus :active et :visited » est-elle gratuite ?
Oui — le texte complet de « :hover :focus :active et :visited » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « :hover :focus :active et :visited » ?
Mettez en forme les états interactifs des liens et des boutons à l’aide des pseudo-classes CSS les plus courantes. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « :hover :focus :active et :visited » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- :hover :focus :active et :visited
- :nth-child et :nth-of-type
- :not() :is() et :where()
- :checked :disabled et pseudo-classes d’état des formulaires