Chargement...

Pseudo-classes CSS

Vous maîtrisez déjà les sélecteurs de balise, class, id et attribut. Il reste une couche : parfois vous ne voulez pas le même aspect en permanence ; vous voulez un changement quand le pointeur est sur le bouton, quand on arrive au champ avec Tab, ou quand le lien a déjà été ouvert. C’est le rôle des pseudo-classes — sans nouvelle class dans le HTML.

Que signifie pseudo-classe ?

Une pseudo-classe est un mot collé au sélecteur avec deux-points simples (:). Dans le HTML, vous ne voyez pas class="hover". Le navigateur active la règle quand la condition est vraie : pointeur dessus, focus, historique du lien, ou place parmi les enfants du parent.

Pseudo-classes courantes

Commencez par celles-ci. Il en existe d’autres, mais elles suffisent souvent pour démarrer en UI.

📊 Pseudo-classes CSS du quotidien

Pseudo-classe Quand elle s’active Exemple
:hover Le pointeur est sur l’élément a:hover
:focus L’élément a le focus (clavier ou clic) input:focus
:visited Le lien a déjà été visité (limites de confidentialité) a:visited
:first-child L’élément est le premier enfant de son parent li:first-child
:nth-child(n) Le n-ième enfant, ou impair/pair tr:nth-child(odd)
:disabled Le contrôle de formulaire est désactivé button:disabled

Survol — :hover

Avec :hover, l’apparence change tant que le pointeur est sur l’élément. Boutons et liens paraissent vivants avec un petit changement — pas un saut de mise en page.

Survol — retour du bouton

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Note sur le survol

Gardez le changement doux. Au tactile, il n’y a presque pas de vrai survol ; ne mettez pas une info essentielle uniquement dans :hover.

Focus — :focus

:focus cible l’élément actif maintenant — par exemple après Tab. Sans anneau de focus visible, l’utilisateur clavier se perd dans le formulaire.

Focus — anneau clair sur l’input

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Survol et focus : les deux sont nécessaires

Le survol concerne le pointeur. Le focus signifie « ce contrôle est actif maintenant ». N’enlevez outline qu’avec un remplacement aussi clair.

Liens visités — :visited

:visited colore les liens que le navigateur croit déjà ouverts. Souvent seulement la couleur (et peu de propriétés). Ne comptez pas sur padding ou mise en page — la confidentialité limite cela.

Visité — couleur douce du lien

css
CSS Code 
a:visited {
color: #6b21a8;
}

Ordre des états de lien

Si vous écrivez plusieurs états ensemble, un ordre sûr courant est : link → visited → hover → focus (parfois LVHA). Ainsi survol et focus restent visibles aussi sur les liens visités.

Premier enfant — :first-child

:first-child signifie que l’élément est le premier enfant de son parent — pas « le premier li de toute la page », mais le premier parmi les frères et sœurs sous ce parent.

Premier enfant — mettre en avant le premier item

css
CSS Code 
li:first-child {
font-weight: 700;
}

Ensuite : :nth-child

Avec :nth-child(odd) ou :nth-child(3), vous obtenez des rayures ou « chaque troisième ». Maîtrisez :first-child, puis ces motifs.

Bonnes habitudes

  • Pseudo-classe = deux-points simples (:hover) ; pseudo-élément = doubles (::) — séance suivante
  • Associez toujours un survol interactif à un :focus clair
  • Couleurs visited discrètes
  • Testez aussi avec Tab, pas seulement à la souris

Essayez vous-même

  1. Page courte avec <button>, <input>, quelques liens et <ul> avec trois <li>.
  2. Ajoutez button:hover { background-color: #0f766e; color: #fff; } et passez la souris sur le bouton.
  3. Ajoutez input:focus { outline: 2px solid #0f766e; } et entrez dans le champ avec Tab.
  4. Ajoutez a:visited { color: #6b21a8; }, ouvrez un lien et revenez.
  5. Ajoutez li:first-child { font-weight: 700; } — seul le premier item devient gras.

Erreurs fréquentes

  • Écrire ::hover au lieu de :hover — le double est pour les pseudo-éléments
  • Styler le survol et supprimer outline du focus sans remplacement
  • Attendre une liberté totale de :visited pour toute propriété
  • Croire que p:first-child signifie « le premier paragraphe n’importe où »
  • Mettre un texte important seulement dans :hover pour que l’utilisateur tactile ne le voie jamais

Résumé

  • Les pseudo-classes choisissent selon l’état ou la position avec deux-points simples
  • :hover et :focus donnent un retour ; gardez les deux
  • :visited colore le lien ouvert dans les limites du navigateur
  • :first-child prend le premier enfant ; :nth-child est l’étape suivante
  • Un seul deux-points = pseudo-classe ; doubles = pseudo-élément
  • Entraînez-vous avec souris, Tab et une courte liste

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel