Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Pseudo-classes : hover, focus-visible et états des contrôles | SovranCode

Contenu du coursCSS — Pseudo-classes · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS64 min

CSS — Pseudo-classes

Sélectionnez un élément selon son état ou sa place dans le document avec :hover, :focus-visible, :checked, :disabled, :first-child, :nth-child() et :not(). Mettez en forme les états réels des contrôles HTML.

Une pseudo-classe sélectionne un élément selon son état ou sa relation aux autres éléments. Un pseudo-élément cible une partie particulière ou générée. Les styles doivent rendre visibles les états réels des contrôles, sans simuler leur fonctionnement. Une interface utilisable uniquement au survol exclut le clavier et le tactile ; une information essentielle doit rester dans le HTML, même si un effet décoratif la renforce.

Relier les styles aux états du contrôle

Repérez les règles de survol, de focus et de sélection. Distinguez la pseudo-classe :focus-visible, l’attribut aria-pressed et le pseudo-élément ::before avant de modifier le code.

.button:hover { translate: 0 -2px; } .button:focus-visible { outline: 3px solid #ad5b00; outline-offset: 3px; } .button[aria-pressed='true']::before { content: '✓'; margin-inline-end: .5em; }

Les bons réflexes

Concevez ensemble les états normal, survolé, focalisé, actif et désactivé.
Réservez le contenu généré à la décoration ou à un repère qui complète une information déjà présente.
Testez les états qui se combinent, comme sélection et focus ou survol d’un contrôle désactivé. Un bouton HTML disabled n’est normalement pas accessible par Tab.

ATELIER CSS · ENVIRON 32 MIN

Concevoir des états de contrôle cohérents

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Plusieurs états peuvent se combiner

Un contrôle peut être à la fois survolé et focalisé, sélectionné et focalisé, ou désactivé sous le pointeur. Concevez ces états ensemble plutôt que comme des effets isolés. Le contrôle doit déjà être reconnaissable avant toute interaction. :hover reflète le survol par un dispositif de pointage ; ce n’est pas une indication universelle de l’intention de la personne. :focus-visible s’appuie sur les critères du navigateur pour montrer un repère utile, notamment lors de la navigation au clavier. :active correspond généralement au bref moment de l’activation, pas à une sélection persistante. Utilisez aria-pressed ou aria-current lorsque le fonctionnement réel du composant le demande, puis appliquez les styles à ces attributs.

Des pseudo-classes fonctionnelles pour des sélecteurs précis

:is() prend la spécificité de son argument le plus spécifique, tandis que :where() conserve toujours une spécificité nulle. :not() exclut les éléments correspondants ; :has() permet de sélectionner un élément à partir de sélecteurs relatifs, sous réserve de la prise en charge attendue pour le projet. Ces fonctions peuvent simplifier les règles, mais aussi rendre leur spécificité moins évidente. Lisez le sélecteur complet et vérifiez les éléments ciblés dans les outils de développement. Gardez un fonctionnement de base utilisable lorsque vous ajoutez une amélioration. :has() change la sélection et les styles ; il ne gère ni l’état de l’application, ni le comportement clavier, ni la validation d’un formulaire.

Le contenu généré sert à la présentation

::before et ::after créent des boîtes générées associées à un élément. Ils conviennent à une ligne décorative, une forme ou une marque qui répète un état déjà indiqué. Leur restitution varie selon les navigateurs et les technologies d’assistance : les consignes, noms de boutons, messages d’erreur et données essentielles doivent rester dans le HTML. Ces boîtes peuvent aussi modifier la mise en page ; un libellé traduit plus long ou un texte agrandi peut révéler des chevauchements. Utilisez des marges logiques autour d’une marque, currentColor lorsque cela convient, et vérifiez les couleurs forcées. Si retirer le pseudo-élément empêche de comprendre ou de réaliser une action, il porte probablement trop d’information.

Parcourez les boutons avec Tab, survolez-les et examinez aria-pressed. Retirez ::before et vérifiez que le texte, les couleurs et l’attribut indiquent encore la sélection. Ici, CSS présente des états fixés dans le HTML ; les clics ne changent pas aria-pressed. Modifiez sa valeur dans l’éditeur pour essayer un autre état.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; }
.mode { padding:.8rem 1rem; border:2px solid currentColor; background:white; color:#174986; font:inherit; }
.mode[aria-pressed="true"] { background:#174986; color:white; }
.mode[aria-pressed="true"]::before { content:"✓"; margin-inline-end:.5rem; }
.mode:hover:not(:disabled) { translate:0 -2px; }
.mode:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
.mode:disabled { opacity:.55; cursor:not-allowed; }
</style>
</head>
<body>
<main><h1>Choisir un mode d’apprentissage</h1><div class="actions"><button class="mode" type="button" aria-pressed="true">Pratique guidée</button><button class="mode" type="button" aria-pressed="false">Exercice en autonomie</button><button class="mode" type="button" disabled>Accompagnement indisponible</button></div><p>L’état sélectionné est défini dans le HTML ; CSS le rend visible.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; }
.mode { padding:.8rem 1rem; border:2px solid currentColor; background:white; color:#174986; font:inherit; }
.mode[aria-pressed="true"] { background:#174986; color:white; }
.mode[aria-pressed="true"]::before { content:"✓"; margin-inline-end:.5rem; }
.mode:hover:not(:disabled) { translate:0 -2px; }
.mode:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
.mode:disabled { opacity:.55; cursor:not-allowed; }
</style>
</head>
<body>
<main><h1>Choisir un mode d’apprentissage</h1><div class="actions"><button class="mode" type="button" aria-pressed="true">Pratique guidée</button><button class="mode" type="button" aria-pressed="false">Exercice en autonomie</button><button class="mode" type="button" disabled>Accompagnement indisponible</button></div><p>L’état sélectionné est défini dans le HTML ; CSS le rend visible.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.tab:hover { color: red; }
.tab::after { content: "Current"; }

Voir la correction et son explication

.tab[aria-current="page"] { font-weight:800; border-block-end:3px solid; }
.tab:focus-visible { outline:3px solid; outline-offset:3px; }

Le survol ne représente pas durablement la page courante, et un texte généré ne doit pas inventer cet état. Identifiez le lien courant avec un attribut sémantique et ajoutez un indicateur de focus clavier distinct.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez une barre de trois contrôles avec des styles pour les états normal, survolé, focus-visible, actif, sélectionné et désactivé. Utilisez un pseudo-élément uniquement pour renforcer une sélection déjà indiquée. Distinguez la présentation CSS du comportement qui met à jour les attributs.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Concevoir des états de contrôle cohérents — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Concevoir des états de contrôle cohérents</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Concevoir des états de contrôle cohérents — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Concevoir des états de contrôle cohérents</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Chaque contrôle utilisable possède un indicateur de focus clavier visible.L’état persistant est porté par un attribut HTML sémantique et ne se déduit pas du survol.Retirer le contenu généré ne supprime ni un nom ni une consigne essentielle.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quel sélecteur conserve une spécificité nulle, quels que soient ses arguments ?:where():is():has()

2. Quel usage de ::before convient à un contenu généré ?Une marque décorative qui renforce un texte de sélection visibleLe seul libellé d’un bouton d’envoiUn remplacement de aria-current

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Pseudo-classes

Relier les styles aux états du contrôle

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Concevoir des états de contrôle cohérents

Plusieurs états peuvent se combiner

Des pseudo-classes fonctionnelles pour des sélecteurs précis

Le contenu généré sert à la présentation

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris