Pseudo-classes

7.1 Pseudo-classes d'état

Les pseudo-classes en CSS — ce sont des mots-clés spéciaux qui s’ajoutent aux sélecteurs pour indiquer l’état d’un élément ou sa position dans la structure du document. Elles permettent d'appliquer des styles à des éléments dans certains états ou situations qui ne peuvent pas être indiqués à l’aide de sélecteurs ordinaires.

Pseudo-classes principales :

• Pseudo-classes d'état
• Pseudo-classes d'état structurel
• Pseudo-classes de formulaire
• Pseudo-classes de navigation

Syntaxe :

    
      sélecteur:pseudo-classe {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Pseudo-classes d'état

Ces pseudo-classes sont utilisées pour styliser les éléments selon leur état actuel, par exemple, lors du survol par la souris ou lorsque l'élément est actif :

• :hover — appliqué lorsque l'utilisateur survole un élément
• :active — appliqué lorsque l'élément est activé (généralement lors d'un clic)
• :focus — appliqué lorsque l'élément est au focus (par exemple lors de l'utilisation du clavier)
• :visited — appliqué aux liens visités
• :link — appliqué aux liens non visités

7.2 Pseudo-classe hover

La pseudo-classe :hover s'applique à un élément lorsque l'utilisateur pointe dessus avec la souris. C'est souvent utilisé pour changer l'apparence des liens et des boutons lors du survol.

Syntaxe :

    
      sélecteur:hover {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

Ce sélecteur change la couleur du texte et souligne les liens lors du survol de la souris.

    
      <a href="#">Lien factice</a>
    
  

    
      a:hover {
        color: red;
        text-decoration: underline;
      }
    
  

Utilisation :

• Améliore l'interaction utilisateur (UI) grâce au feedback visuel
• Utilisé pour les boutons, les liens et autres éléments interactifs

7.3 Pseudo-classe focus

La pseudo-classe :focus s'applique à un élément lorsqu'il reçoit le focus. Par exemple, en cliquant dessus ou en naviguant avec la touche tabulation. Elle est surtout utilisée pour les champs de saisie et autres éléments de formulaire.

Syntaxe :

    
      sélecteur:focus {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

Ce sélecteur change la couleur de la bordure d'un champ de saisie et enlève le contour lors du focus.

    
      <input type="text" name="text" id="text">
    
  

    
      input:focus {
        border-color: blue;
        outline: none;
      }
    
  

Utilisation :

• Améliore l'accessibilité des pages web
• Rend les éléments interactifs plus visibles lors du focus

7.4 Pseudo-classe nth-child

La pseudo-classe :nth-child s'applique aux éléments en fonction de leur position parmi les enfants du parent. Elle accepte un argument qui peut être un nombre, un mot-clé ou une expression.

Syntaxe :

    
      sélecteur:nth-child(n) {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

Ce sélecteur permet d'appliquer des styles aux éléments selon leur position parmi les frères et sœurs.

    
      <ul>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
        <li>Élément 4</li>
        <li>Élément 5</li>
        <li>Élément 6</li>
        <li>Élément 7</li>
      </ul>
    
  

    
      /* Applique des styles à tous les éléments enfants impairs */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Applique des styles à tous les éléments enfants pairs */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Applique des styles au deuxième élément enfant */
      li:nth-child(2) {
          color: red;
      }
    
  

Utilisation :

• Stylise des lignes de tableaux, des éléments de liste et d'autres structures répétitives
• Permet de créer des mises en page et des styles complexes sans ajouter de classes supplémentaires

7.5 Exemples d'utilisation des pseudo-classes

    
      <button type="button">Bouton</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Stylisation des lignes paires d'une table :

    
      <table>
        <tr>
          <th>Nom</th>
          <th>Quantité</th>
          <th>Prix</th>
        </tr>
        <tr>
          <td>Produit 1</td>
          <td>5</td>
          <td>10 €</td>
        </tr>
        <tr>
          <td>Produit 2</td>
          <td>3</td>
          <td>15 €</td>
        </tr>
        <tr>
          <td>Produit 3</td>
          <td>8</td>
          <td>7 €</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Exclusion de certains éléments d'un style général :

    
      <ul>
        <li class="list-item">Élément 1</li>
        <li class="list-item">Élément 2</li>
        <li class="list-item">Élément 3</li>
        <li class="list-item">Élément 4</li>
        <li class="list-item">Élément 5</li>
        <li class="list-item">Élément 6</li>
        <li class="list-item">Élément 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }