Que sont les pseudo-classes et les pseudo-éléments en CSS

Les pseudo-classes en CSS sont des sélecteurs utilisés pour sélectionner des éléments qui sont dans un état spécifique, qui sont généralement invisibles ou non représentés par une classe ou un ID de l'élément HTML lui-même. Les pseudo-éléments en CSS ressemblent davantage à des éléments enfants d'un élément, mais ils ne font pas réellement partie de la véritable arborescence DOM. Les pseudo-éléments permettent d'appliquer des styles à des parties spécifiques d'un élément sans ajouter de balisage HTML supplémentaire. Les pseudo-classes et les pseudo-éléments offrent un moyen flexible de sélectionner et de styliser des éléments ou des états d'éléments spécifiques, et ce sont des outils très utiles en CSS.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

En CSS, les pseudo-classes et les pseudo-éléments sont des sélecteurs CSS spéciaux qui peuvent être utilisés pour sélectionner et styliser certains éléments ou états d'éléments spécifiques.

1. La pseudo-classe est un sélecteur utilisé pour sélectionner des éléments dans un état spécifique. Ces états sont généralement invisibles ou non représentés par une classe ou un ID de l'élément HTML lui-même. Par exemple, la pseudo-classe :hover peut être utilisée pour sélectionner l'élément survolé par le pointeur de la souris.

a:hover {  
    color: red;  
}

Dans cet exemple, lorsque la souris passe sur le lien (élément ), la couleur du lien passe au rouge.

En plus de :hover, il existe de nombreuses autres pseudo-classes, telles que :active (sélectionnez les éléments activés par l'utilisateur), :visited (sélectionnez les liens qui ont été visités par l'utilisateur), etc.

2. Les pseudo-éléments ressemblent davantage à des éléments enfants d'éléments, mais en fait ils ne font pas partie du véritable arbre DOM. Les pseudo-éléments vous permettent d'appliquer des styles à des parties spécifiques d'un élément sans ajouter de balisage HTML supplémentaire. Par exemple, les pseudo-éléments :before et :after peuvent être utilisés pour insérer du contenu ou des styles avant et après le contenu d'un élément.

p:before {  
    content: "Hello, ";  
}  
  
p:after {  
    content: "world!";  
}

Dans cet exemple, le texte « Bonjour » sera inséré devant chaque paragraphe (élément

), et le texte « monde ! » sera inséré à la fin. Notez que l'attribut content est obligatoire et définit le contenu du pseudo-élément.