Introduction aux pseudo-classes

1.1 Pseudo-classes

Les pseudo-classes en CSS — ce sont des mots-clés spéciaux ajoutés aux sélecteurs pour indiquer leur état ou position dans l'arbre du document. Elles permettent de styliser des éléments en fonction de leur état ou relation avec d'autres éléments sans avoir besoin d'ajouter des classes ou des identifiants dans le code HTML.

Concepts de base des pseudo-classes

1. Définition de l'état d'un élément :
   • Les pseudo-classes peuvent indiquer l'état d'un élément, comme le survol de la souris, le focus ou l'activation
2. Définition de la position d'un élément :
   • Les pseudo-classes peuvent indiquer la position d'un élément par rapport à son parent ou à d'autres éléments, comme le premier ou le dernier élément
3. Cas spéciaux et groupes logiques :
   • Les pseudo-classes peuvent également définir des cas spéciaux, comme le premier élément de type ou les éléments impairs/paire

Comment utiliser les pseudo-classes

Les pseudo-classes sont ajoutées à un sélecteur en utilisant deux points (:). Elles peuvent être utilisées avec les sélecteurs d'éléments, ainsi qu'avec les classes, les identifiants et d'autres sélecteurs.

Syntaxe :

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

Exemples d'utilisation

1. Sélecteur d'élément avec pseudo-classe

Dans cet exemple, tous les premiers paragraphes (<p>) à l'intérieur de leurs éléments parents seront en gras :

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Sélecteur de classe avec pseudo-classe

Dans cet exemple, le fond de tous les éléments avec la classe .button deviendra bleu au survol de la souris :

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Sélecteurs combinés avec pseudo-classes

Dans cet exemple, tous les paragraphes pairs (<p>) à l'intérieur des éléments de la classe .container seront rouges :

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Exemples de pseudo-classes et leur application

1. Pseudo-classes définissant l'état

Les pseudo-classes définissant l'état d'un élément permettent de modifier sa stylisation en fonction de l'interaction de l'utilisateur ou de l'état de l'élément.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudo-classes définissant la position

Les pseudo-classes définissant la position d'un élément permettent d'appliquer des styles aux éléments en fonction de leur emplacement dans la structure DOM.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudo-classes pour les groupes logiques

Ces pseudo-classes permettent de styliser des éléments en fonction de leurs groupes logiques ou types.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }