Décrivez les pseudo-classes et pseudo-éléments en…

Les pseudo-classes et pseudo-éléments étendent les capacités des sélecteurs en CSS, permettant d'appliquer des styles en fonction de l'état, de la position ou d'autres caractéristiques des éléments, qui ne peuvent pas être exprimées par des sélecteurs simples.

Pseudo-classes

Les pseudo-classes commencent par deux points (:). Elles sont utilisées pour styliser un élément dans un état spécifique.

Principales pseudo-classes :

:hover - stylise l'élément lors du survol avec la souris.
:active - stylise l'élément lors du clic (activation).
:focus - stylise l'élément qui a actuellement le focus (par exemple, après avoir cliqué sur un lien ou un champ de saisie).
:visited - stylise les liens visités.
:link - stylise les liens non visités.
:first-child - stylise le premier enfant de son parent.
:last-child - stylise le dernier enfant de son parent.
:nth-child(n) - stylise le n-ième enfant de son parent. n peut être un nombre, un mot-clé (even, odd) ou une expression (2n+1).
:nth-last-child(n) - stylise le n-ième enfant à partir de la fin.
:not(selector) - stylise les éléments qui ne correspondent pas au sélecteur spécifié.

/* Exemple d'utilisation des pseudo-classes */
a:hover {
  color: blue; /* Change la couleur du lien au survol */
}

input:focus {
  border-color: green; /* Change la couleur de la bordure du champ de saisie au focus */
}

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

Pseudo-éléments

Les pseudo-éléments commencent par deux points doubles (::). Ils sont utilisés pour styliser une partie spécifique de l'élément ou pour insérer du contenu généré avant ou après le contenu de l'élément.

Principaux pseudo-éléments :

::before - insère du contenu généré avant le contenu de l'élément. Souvent utilisé avec la propriété content.
::after - insère du contenu généré après le contenu de l'élément. Nécessite également la propriété content.
::first-letter - stylise la première lettre du bloc de texte.
::first-line - stylise la première ligne du bloc de texte.
::selection - stylise la partie de l'élément sélectionnée par l'utilisateur.

/* Exemple d'utilisation des pseudo-éléments */
p::first-letter {
  font-size: 2em; /* Agrandit la première lettre du paragraphe */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Ajoute du texte après le titre */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Change la couleur de fond du texte sélectionné */
  color: black;
}

Historiquement, les pseudo-classes utilisaient un seul deux-points (:) pour compatibilité avec CSS2.1, tandis que les pseudo-éléments en CSS3 ont commencé à utiliser deux deux-points (::) pour une meilleure distinction. Il est recommandé d'utiliser deux deux-points pour les pseudo-éléments dans le code moderne.

Tableau comparatif :

Caractéristique	Pseudo-classe	Pseudo-élément
Syntaxe	`:sélecteur`	`::sélecteur`
But	État de l'élément	Partie de l'élément ou contenu généré
Exemples	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Décrivez les pseudo-classes et pseudo-éléments en CSS.