Pseudo-classes d'état

2.1 Pseudo-classe :hover

Les pseudo-classes d'état permettent d'appliquer des styles aux éléments en fonction de leur interaction avec l'utilisateur ou de leur état actuel. Ces pseudo-classes sont souvent utilisées pour améliorer l'interface utilisateur, en fournissant un retour visuel sur les actions de l'utilisateur.

La pseudo-classe :hover est appliquée à un élément lorsque l'utilisateur survole cet élément avec le curseur de la souris.

Syntaxe :

    
      sélectionneur:hover {
        propriétés: valeurs;
      }
    
  

Exemple :

Dans cet exemple, le lien change de couleur et ajoute un soulignement au survol de la souris, et le bouton change de couleur de fond et de texte.

    
      /* Stylisation du lien au survol */

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

      /* Stylisation du bouton au survol */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudo-classe :focus

La pseudo-classe :focus est appliquée à un élément lorsqu'il reçoit le focus, par exemple, en cliquant sur un élément de formulaire ou en y accédant à l'aide de la touche Tab.

Syntaxe :

    
      sélectionneur:focus {
        propriétés: valeurs;
      }
    
  

Exemple :

Dans cet exemple, le champ de saisie change la couleur de sa bordure et supprime le contour lorsqu'il est en focus, et le champ de texte change de couleur de fond.

    
      /* Stylisation du champ de saisie en focus */

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

      /* Stylisation du champ de texte en focus */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudo-classe :active

La pseudo-classe :active est appliquée à un élément au moment de son activation par l'utilisateur, par exemple, lors du clic d'une souris. Cette pseudo-classe est souvent utilisée pour créer un retour visuel lors de l'activation d'éléments de l'interface.

Syntaxe :

    
      sélectionneur:active {
        propriétés: valeurs;
      }
    
  

Exemple :

Dans cet exemple, le lien change de couleur lors du clic, et le bouton change sa couleur de fond et rétrécit légèrement, créant un effet de pression.

    
      /* Stylisation du lien lors du clic */

      a:active {
        color: green;
      }

      /* Stylisation du bouton lors du clic */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudo-classe :visited

La pseudo-classe :visited est appliquée aux liens déjà visités par l'utilisateur. Elle permet de styliser les liens visités différemment des liens non visités.

Syntaxe :

    
      sélectionneur:visited {
        propriétés: valeurs;
      }
    
  

Exemple :

Dans cet exemple, le lien visité change de couleur en violet pour le distinguer des liens non visités :

    
      /* Stylisation du lien visité */

      a:visited {
        color: purple;
      }
    
  

2.5 Combinaison de pseudo-classes

Les pseudo-classes d'état peuvent être combinées pour créer des styles interactifs complexes. Par exemple, vous pouvez définir différents styles pour les liens en fonction de leur état.

Exemple de mise en œuvre complète

Dans cet exemple, la stylisation des liens change en fonction de leur état : état de base, liens visités, liens survolés et liens en cours de clic :

    
      /* Style de base pour les liens */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Stylisation du lien visité */

      a:visited {
        color: purple;
      }

      /* Stylisation du lien au survol */

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

      /* Stylisation du lien lors du clic */

      a:active {
        color: green;
      }