Qu'est-ce que les pseudo-classes en CSS?

Les pseudo-classes en CSS sont des mots-clés ajoutés aux sélecteurs pour indiquer un état particulier de l’élément. Elles permettent d’appliquer des styles en fonction de l’interaction de l’utilisateur, de la position dans la structure du document ou d’autres caractéristiques qui ne peuvent pas être exprimées par des sélecteurs standards.

Exemples de pseudo-classes :

• États de l’utilisateur :

  • :hover - élément survolé par la souris.
  • :active - élément activé (par exemple, un bouton cliqué).
  • :focus - élément en focus de saisie (par exemple, un champ de texte).
  • :visited - lien déjà visité par l’utilisateur.
  • :link - lien non encore visité.

• Position dans la structure :

  • :first-child - premier enfant de son parent.
  • :last-child - dernier enfant de son parent.
  • :nth-child(n) - n-ième enfant de son parent.
  • :first-of-type - premier élément de son type parmi les enfants.
  • :last-of-type - dernier élément de son type parmi les enfants.

• Autres :

  • :empty - élément sans enfants ni texte.
  • :not(selector) - éléments ne correspondant pas au sélecteur indiqué.

Syntaxe :

selector:pseudo-class {
  property: value;
}

Exemple d’utilisation :

/* Changer la couleur du texte au survol d’un paragraphe */
p:hover {
  color: blue;
}

/* Style pour le premier élément de la liste */
li:first-child {
  font-weight: bold;
}

Les pseudo-classes étendent les capacités des sélecteurs, permettant de créer des interfaces plus dynamiques et interactives sans utiliser JavaScript pour des changements de style simples.