CSS Pseudo-classes
Pseudo-classes CSS
Une pseudo-classe CSS est un mot-clé qui peut être ajouté à un sélecteur pour définir un style pour un état particulier d'un élément.
Voici quelques utilisations courantes des pseudo-classes :
- Styliser un élément lorsque l'utilisateur déplace la souris dessus
- Styliser différemment les liens visités et non visités
- Styliser un élément lorsqu'il reçoit le focus
- Styliser les éléments de formulaire valides/invalide/requis/optionnels
- Styliser un élément qui est le premier enfant de son parent
Syntaxe
Les pseudo-classes sont toujours désignées par un deux-points (:) suivi du nom de la pseudo-classe :
sélecteur:pseudo-classe-nom {
Propriétés CSS
} Ici, nous utilisons la pseudo-classe :hover et la pseudo-classe :focus :
Survolez-moi
Pseudo-classes utilisées sur les liens
Pour les liens HTML, il est courant d'utiliser les pseudo-classes suivantes :
-
:link- Stylise les liens non visités -
:visited- Stylise les liens visités -
:hover- Stylise un lien au survol de la souris -
:active- Stylise un lien activé
Exemple
Afficher les liens dans différentes couleurs selon leur état :
/* lien non visité */
a:link {
color: #FF0000;
}
/* lien visité */
a:visited {
color: #00FF00;
}
/* lien au survol */
a:hover {
color: #FF00FF;
}
/* lien sélectionné */
a:active {
color: #0000FF;
} Remarque : a:hover DOIT venir après a:link et a:visited dans la définition CSS pour être efficace ! a:active DOIT venir après a:hover dans la définition CSS pour être efficace ! Les noms de pseudo-classes ne sont pas sensibles à la casse.
:hover sur <div>
Voici un exemple d'utilisation de la pseudo-classe :hover sur un élément <div> :
Exemple
div:hover {
background-color: blue;
} :focus sur <input>
Voici un exemple d'utilisation de la pseudo-classe :focus pour styliser un champ de saisie lorsqu'il reçoit le focus :
Exemple
input:focus {
background-color: yellow;
} Pseudo-classes et classes HTML
Les pseudo-classes peuvent facilement être combinées avec des classes HTML :
Exemple
Ajouter une pseudo-classe :hover à l'élément <a> avec la classe "highlight" :
a.highlight:hover {
color: #ff0000;
} Simple Tooltip Hover
Survolez un élément <div> pour afficher un élément <p> (comme un tooltip) :
Exemple
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
} La pseudo-classe CSS :first-child
La pseudo-classe :first-child correspond à un élément spécifique qui est le premier enfant d'un autre élément.
Styliser tous les premiers enfants <p>
Dans l'exemple suivant, le sélecteur correspond à tous les éléments <p> qui sont le premier enfant de n'importe quel élément :
Exemple
p:first-child {
color: blue;
} Styliser le premier élément <em> dans tous les éléments <p>
Dans l'exemple suivant, le sélecteur correspond au premier élément <em> dans tous les éléments <p> :
Exemple
p em:first-child {
color: blue;
} Styliser tous les éléments <em> dans tous les premiers enfants <p>
Dans l'exemple suivant, le sélecteur correspond à tous les éléments <em> dans les éléments <p> qui sont le premier enfant d'un autre élément :
Exemple
p:first-child em {
color: blue;
} La pseudo-classe CSS :lang()
La pseudo-classe :lang() est utilisée pour sélectionner des éléments ayant un attribut lang avec la valeur spécifiée.
Exemple
Définir les guillemets pour les éléments <q> avec lang="no" :
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Du texte <q lang="no">Une citation dans un paragraphe</q> Du texte.</p>
</body>
</html> Référence des Pseudo-classes CSS
Pour une liste complète de toutes les pseudo-classes CSS, visitez notre Référence des Pseudo-classes CSS .