Découvrez la liste complète des pseudo-classes CSS, avec des explications détaillées sur leur utilisation. Apprenez comment cibler et styliser vos éléments HTML de manière efficace grâce à ces sélecteurs CSS avancés.
Une pseudo-classe CSS est un sélecteur qui permet de cibler un état spécifique d’un élément HTML. Par exemple, vous pouvez utiliser une pseudo-classe pour cibler un lien lorsqu’il est survolé par la souris, ou un champ de texte lorsqu’il est en focus.
Voici un exemple d’utilisation de la pseudo-classe :hover en CSS :
<a href="#" class="lien">Cliquez ici</a>
.lien {
color: #3498db;
text-decoration: none;
}
.lien:hover {
color: #e74c3c;
}
Dans cet exemple, la couleur du texte du lien change en rouge lorsque vous survolez le lien avec la souris, grâce à l’utilisation de la pseudo-classe :hover.
Liste complète des pseudo-classes CSS
| Nom | Description |
|---|---|
:active |
La pseudo-classe :active est utilisée pour sélectionner un élément lorsqu’il est activé, généralement en réponse à une action de l’utilisateur, comme un clic. |
:checked |
La pseudo-classe :checked est utilisée pour sélectionner les éléments <input> de type « radio » ou « checkbox » qui sont cochés. |
:disabled |
La pseudo-classe :disabled est utilisée pour sélectionner les éléments qui sont désactivés. |
:empty |
La pseudo-classe :empty est utilisée pour sélectionner les éléments qui ne contiennent pas d’enfants (texte, éléments ou espaces réservés). |
:first-child |
La pseudo-classe :first-child est utilisée pour sélectionner un élément qui est le premier enfant de son parent. |
:first-of-type |
La pseudo-classe :first-of-type est utilisée pour sélectionner le premier élément de son type parmi les enfants de son parent. |
:focus |
La pseudo-classe :focus est utilisée pour sélectionner un élément qui a reçu le focus de l’utilisateur, souvent via un clic ou un défilement. |
:hover |
La pseudo-classe :hover est utilisée pour sélectionner un élément lorsque le curseur de la souris se trouve au-dessus de cet élément. |
:in-range |
La pseudo-classe :in-range est utilisée pour sélectionner les éléments <input> dont la valeur est dans une plage spécifique définie par les attributs min et max. |
:invalid |
La pseudo-classe :invalid est utilisée pour sélectionner les éléments <input> dont la valeur est invalide, par exemple lorsqu’elle ne correspond pas au type d’entrée attendu. |
:last-child |
La pseudo-classe :last-child est utilisée pour sélectionner un élément qui est le dernier enfant de son parent. |
:last-of-type |
La pseudo-classe :last-of-type est utilisée pour sélectionner le dernier élément de son type parmi les enfants de son parent. |
:link |
La pseudo-classe :link est utilisée pour sélectionner les liens non visités. |
:not() |
La pseudo-classe :not() est utilisée pour sélectionner les éléments qui ne correspondent pas à une liste de sélecteurs donnée. |
:nth-child() |
La pseudo-classe :nth-child() est utilisée pour sélectionner les éléments qui sont enfants d’un parent spécifique et qui correspondent à un certain ordre parmi les enfants de ce parent. |
:nth-of-type() |
La pseudo-classe :nth-of-type() est utilisée pour sélectionner les éléments de type spécifique parmi les enfants de leur parent, en fonction de leur position dans cet ensemble. |
:only-of-type |
La pseudo-classe :only-of-type est utilisée pour sélectionner les éléments qui sont le seul enfant de leur type parmi les enfants de leur parent. |
:only-child |
La pseudo-classe :only-child est utilisée pour sélectionner les éléments qui sont le seul enfant de leur parent. |
:optional |
La pseudo-classe :optional est utilisée pour sélectionner les éléments <input> qui ne sont pas requis (c’est-à-dire qu’ils n’ont pas d’attribut required). |
:out-of-range |
La pseudo-classe :out-of-range est utilisée pour sélectionner les éléments <input> dont la valeur est en dehors de la plage spécifiée par les attributs min et max. |
:read-only |
La pseudo-classe :read-only est utilisée pour sélectionner les éléments <input> qui sont en lecture seule (c’est-à-dire qu’ils ont l’attribut readonly). |
:read-write |
La pseudo-classe :read-write est utilisée pour sélectionner les éléments <input> qui sont en lecture-écriture (c’est-à-dire qu’ils ne sont pas en lecture seule et n’ont pas l’attribut readonly). |
:required |
La pseudo-classe :required est utilisée pour sélectionner les éléments <input> qui sont requis (c’est-à-dire qu’ils ont l’attribut required). |
:root |
La pseudo-classe :root est utilisée pour sélectionner l’élément racine du document, généralement l’élément <html>. |
:target |
La pseudo-classe :target est utilisée pour sélectionner l’élément ciblé par l’identifiant dans l’URL de la page. |
:valid |
La pseudo-classe :valid est utilisée pour sélectionner les éléments <input> dont la valeur est valide, c’est-à-dire qu’elle correspond au type d’entrée attendu. |
:visited |
La pseudo-classe :visited est utilisée pour sélectionner les liens déjà visités. |
Une classe CSS est utilisée pour regrouper des éléments et leur appliquer un style commun, tandis qu’une pseudo-classe CSS est utilisée pour cibler des états spécifiques des éléments HTML et appliquer des styles en conséquence.
