Pseudo-classes de structure

3.1 Pseudo-classe :first-child

Les pseudo-classes de structure en CSS permettent de sélectionner et styliser des éléments en fonction de leur position dans l'arbre du document. C'est particulièrement utile pour créer des styles plus précis et détaillés appliqués à des éléments spécifiques. Examinons les pseudo-classes :first-child, :last-child, :nth-child et :nth-of-type.

La pseudo-classe :first-child sélectionne le premier enfant de son parent. C'est utile pour styliser le premier élément d'un groupe d'éléments similaires, comme des listes ou des paragraphes.

Syntaxe :

    
      sélecteur:first-child {
        propriétés: valeurs;
      }
    
  

Exemple d'utilisation

Dans cet exemple, le premier élément de la liste est mis en gras et en rouge, et le premier paragraphe dans le div est transformé en majuscules :

    
      /* Stylisation du premier élément de la liste */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Stylisation du premier paragraphe dans le div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudo-classe :last-child

La pseudo-classe :last-child sélectionne le dernier enfant de son parent. Elle est utilisée pour styliser le dernier élément d'un groupe d'éléments similaires.

Syntaxe :

    
      sélecteur:last-child {
        propriétés: valeurs;
      }
    
  

Exemple d'utilisation

Dans cet exemple, le dernier élément de la liste est mis en italique et en bleu, et le dernier paragraphe dans le div est souligné :

    
      /* Stylisation du dernier élément de la liste */

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

      /* Stylisation du dernier paragraphe dans le div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudo-classe :nth-child

La pseudo-classe :nth-child permet de sélectionner des éléments en fonction de leur position dans un groupe. Elle prend un argument, qui détermine quels éléments seront sélectionnés. L'argument peut être un nombre, un mot-clé ou une expression.

Syntaxe :

    
      sélecteurnth-child(argument) {
        propriétés: valeurs;
      }
    
  

Arguments :

• Nombre: sélectionne l'élément à la position indiquée
• Mots-clés: odd (impairs) et even (pairs)
• Expression: format an+b, où a et b sont des nombres

Exemple 1: Sélection des éléments impairs

Dans cet exemple, tous les éléments impairs de la liste sont stylisés avec un fond gris clair :

    
      /* Stylisation des éléments impairs de la liste */

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

Exemple 2: Sélection des éléments à une position spécifique

Dans cet exemple, le troisième élément de la liste est mis en gras et en vert :

    
      /* Stylisation du troisième élément de la liste */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Exemple 3: Utilisation d'expressions

Dans cet exemple, chaque deuxième élément, en commençant par le premier, est stylisé avec un fond gris clair :

    
      /* Stylisation de chaque deuxième élément, en commençant par le premier */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudo-classe :nth-of-type

La pseudo-classe :nth-of-type est semblable à :nth-child, mais elle sélectionne des éléments en fonction de leur type parmi les enfants d'un même parent. Cela permet de sélectionner des types d'éléments spécifiques, même s'ils ne sont pas les premiers enfants de leur parent.

Syntaxe :

    
      sélecteur:nth-of-type(argument) {
        propriétés: valeurs;
      }
    
  

Arguments :

• Nombre: sélectionne l'élément à la position indiquée parmi les éléments du même type
• Mots-clés: odd (impairs) et even (pairs)
• Expression: format an+b, où a et b sont des nombres

Exemple 1: Sélection des paragraphes pairs

Dans cet exemple, tous les paragraphes pairs sont stylisés avec un fond gris clair :

    
      /* Stylisation des paragraphes pairs */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Exemple 2: Sélection d'éléments à une position spécifique parmi un type

Dans cet exemple, le deuxième titre h2 est agrandi et coloré en orange :

    
      /* Stylisation du deuxième titre h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Exemple 3: Utilisation d'expressions

Dans cet exemple, chaque troisième élément de la liste, en commençant par le deuxième, est stylisé avec un fond gris clair :

    
      /* Stylisation de chaque troisième élément de la liste, en commençant par le deuxième */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }