Les Pseudo-classes en CSS

Jusqu’à présent nous avons défini des styles à l'aide de sélecteurs

Les pseudo-classes sont un ajout que nous pouvons mettre au sélecteur pour sélectionner uniquement les éléments qui ont une certaine caractéristique

Les pseudo-classes ont tous la même syntaxe

sélecteur:pseudo-classe

Par exemple, la pseudo-classe hover permet de modifier le style d’un sélecteur selon que la souris est sur l’élément ou non :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8"/>
    <title>Pseudo-classes CSS</title>
    <style>
    a:hover {
        color: orange;
        text-decoration: overline;
    </style>
</head>
<body>
    <a href="http://google.ca">Google (CA)</a>
</body>
</html>

Quand la souris n’est pas sur le lien (élément a) :

Google (CA)

Quand on passe avec la souris l'élément a) :

Google (CA)

Voici une liste des pseudo-classes utilisées pour les liens :

Pseudo-classe	Définition	Exemple(s)
:hover	Se produit quand la souris survole l'élément. S’utilise avec tous les éléments.	p:hover sélectionne le paragraphe survolé par la souris. a:hover sélectionne l'hyperlien survolé par la souris.
:link	Sélectionne les éléments (liens) qui n'ont pas été visités.	a:link sélectionne les lien qui n’ont jamais été visités.
:visited	Sélectionne les éléments (liens) déjà visités.	a:visited sélectionne les liens qui ont déjà été visités.
:active	Sélectionne les éléments (liens) actifs.	a:active sélectionne un lien sur lequel on a cliqué.