Chapitre 15 : L'ordre des pseudo-classes : La règle LVHA

Il existe un ordre précis dans lequel vous devez déclarer vos styles pour éviter que certaines règles ne s'annulent entre elles à cause de la spécificité CSS.

Si vous stylisez un lien, l'ordre recommandé est :

1. :link (Lien non visité)
2. :visited (Lien visité)
3. :hover (Survol)
4. :active (Clic)

Moyen mnémotechnique : LVHA (Love-Hate).

Si vous placez :hover avant :link, le style de :link pourrait écraser celui du survol. En CSS, quand deux règles ont la même spécificité, c'est la dernière déclarée qui gagne.

Questions clés

1. Quelle est la différence fondamentale entre :focus et :active ?

Découvrir la réponse

Le :focus est un état de sélection durable (l'élément est "prêt" à recevoir des données ou une action). Le :active est un état instantané qui ne dure que le temps de la pression physique sur le bouton de la souris ou l'écran.

2. Pourquoi est-il dangereux d'utiliser outline: none dans un sélecteur :focus ?

Découvrir la réponse

Parce que cela supprime l'indicateur visuel pour les utilisateurs naviguant au clavier (touche Tab). Sans cet indicateur, l'utilisateur ne sait plus où il se trouve dans la page, ce qui rend le site inaccessible.

3. Est-ce que :hover fonctionne sur mobile ?

Découvrir la réponse

Non, pas de manière native et prévisible. Sur mobile, le survol n'existe pas. Certains navigateurs simulent un premier clic pour déclencher le :hover, mais c'est un comportement incohérent. Il ne faut jamais dépendre du :hover pour afficher des informations essentielles.

4. Comment créer un effet de bouton "enfoncé" ?

Découvrir la réponse

On utilise généralement la pseudo-classe :active combinée avec transform: scale(0.95) pour réduire légèrement la taille du bouton et box-shadow: inset pour créer une ombre interne qui simule la profondeur.

5. À quoi sert la pseudo-classe :focus-visible ?

Découvrir la réponse

Elle permet de n'afficher l'indicateur de focus que lorsque l'utilisateur utilise un mode de navigation qui justifie un indicateur visuel (comme le clavier), tout en le cachant pour les utilisateurs de souris, offrant ainsi un meilleur compromis entre design et accessibilité.

Mise en pratique

Exercice 1 : Reproduction guidée

Objectif : Créer un bouton de validation simple avec un retour visuel complet.

Consignes :

1. Créez un bouton avec la classe .btn-submit.
2. Stylez-le en bleu (#3498db) avec du texte blanc.
3. Ajoutez un effet de survol (:hover) qui assombrit la couleur.
4. Ajoutez un effet de clic (:active) qui réduit la taille du bouton de 5%.
5. Ajoutez une transition fluide de 0.2s sur toutes les propriétés.

Découvrir la solution commentée

.btn-submit {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Transition pour éviter le changement brutal de couleur */
  transition: all 0.2s ease;
}

.btn-submit:hover {
  background-color: #2980b9;
}

.btn-submit:active {
  /* scale(0.95) réduit la taille à 95% de l'origine */
  transform: scale(0.95);
}

Exercice 2 : Adaptation

Objectif : Styliser un champ de saisie de texte pour qu'il soit "vivant" lors de la saisie.

HTML de départ :

<div class="field-wrapper">
  <label for="username">Nom d'utilisateur</label>
  <input type="text" id="username" class="input-field" placeholder="Ex: jean.dupont">
</div>

Consignes :

1. Donnez à .input-field une bordure grise claire.
2. Lorsqu'il est sélectionné (:focus), changez la bordure en bleu et ajoutez un halo lumineux (box-shadow) bleu clair.
3. Assurez-vous que le focus est visible et accessible.

Découvrir la solution commentée

.input-field {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-field:focus {
  /* On retire l'outline par défaut pour mettre notre propre style */
  outline: none;
  border-color: #3498db;
  /* 0 0 0 3px signifie : décalage X=0, Y=0, flou=0, étalement=3px */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

Exercice 3 : Conception

Objectif : Créer un menu de navigation avec des liens qui réagissent au survol et au focus.

HTML de départ :

<nav>
  <ul class="nav-list">
    <li><a href="#" class="nav-link">Accueil</a></li>
    <li><a href="#" class="nav-link">Services</a></li>
    <li><a href="#" class="nav-link">À propos</a></li>
    <li><a href="#" class="nav-link">Contact</a></li>
  </ul>
</nav>

Consignes :

1. Les liens ne doivent pas avoir de soulignement par défaut.
2. Au survol (:hover), le lien doit afficher un soulignement animé (bordure inférieure colorée).
3. Au focus (:focus), le lien doit avoir un fond coloré et des coins arrondis.
4. L'ordre des styles doit respecter la règle LVHA pour éviter les conflits.

Découvrir la solution commentée

.nav-link {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

/* 1. Link (état normal) */
.nav-link:link, .nav-link:visited {
  color: #333;
}

/* 2. Hover (survol) */
.nav-link:hover {
  color: #007bff;
  border-bottom-color: #007bff;
}

/* 3. Focus (sélection clavier) */
.nav-link:focus {
  outline: none;
  background-color: #eef2f7;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #007bff;
}

/* 4. Active (clic) */
.nav-link:active {
  color: #0056b3;
  border-bottom-color: #0056b3;
  transform: translateY(2px);
}