Pseudo-classes CSS

Apprenez les bases des pseudo classes CSS

Les pseudo-classes sont des mots-clés prédéfinis utilisés pour sélectionner un élément en fonction de sonEtat, ou pour cibler un enfant spécifique.

Ils commencent par undeux points simples :.

Ils peuvent être utilisés dans le cadre d'un sélecteur, et ils sont très utiles pour styliser les liens actifs ou visités, par exemple, changer le style au survol, focaliser ou cibler le premier enfant ou les lignes impaires. Très pratique dans de nombreux cas.

Voici les pseudo-classes les plus populaires que vous utiliserez probablement:

Pseudo classe Cibles
:active un élément étant activé par l'utilisateur (par exemple cliqué). Principalement utilisé sur les liens ou les boutons
:checked une case à cocher, une option ou des types d'entrée radio activés
:default la valeur par défaut dans un ensemble de choix (comme, option dans une sélection ou boutons radio)
:disabled un élément désactivé
:empty un élément sans enfants
:enabled un élément activé (opposé à:disabled)
:first-child le premier enfant d'un groupe de frères et sœurs
:focus l'élément avec le focus
:hover un élément survolé avec la souris
:last-child le dernier enfant d'un groupe de frères et sœurs
:link un lien qui n'a pas été visité
:not() tout élément ne correspondant pas au sélecteur passé. Par exemple:not(span)
:nth-child() un élément correspondant à la position spécifiée
:nth-last-child() un élément correspondant à la position spécifique, à partir de la fin
:only-child un élément sans frères et sœurs
:required un élément de formulaire avec lerequiredensemble d'attributs
:root représente lehtmlélément. C'est comme le ciblagehtml, mais c'est plus spécifique. Utile dansVariables CSS.
:target l'élément correspondant au fragment d'URL actuel (pour la navigation interne dans la page)
:valid éléments de formulaire qui ont été validés côté client avec succès
:visited un lien qui a été visité

Faisons un exemple. Un commun, en fait. Vous souhaitez styliser un lien, vous créez donc une règle CSS pour cibler leaélément:

a {
  color: yellow;
}

Les choses semblent bien fonctionner jusqu'à ce que vous cliquiez sur un lien. Le lien revient à la couleur prédéfinie (bleu) lorsque vous cliquez dessus. Ensuite, lorsque vous ouvrez le lien et que vous revenez à la page, le lien est maintenant bleu.

Pourquoi cela arrive-t-il?

Parce que le lien lorsque vous cliquez dessus change d'état et entre dans le:activeEtat. Et quand il a été visité, il est dans le:visitedEtat. Pour toujours, jusqu'à ce que l'utilisateur efface l'historique de navigation.

Donc, pour rendre correctement le lien jaune dans tous les états, vous devez écrire

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()mérite une mention spéciale. Il peut être utilisé pour cibler les enfants impairs ou pairs avec:nth-child(odd)et:nth-child(even).

Il est couramment utilisé dans les listes pour colorer les lignes impaires différemment des lignes paires:

ul:nth-child(odd) {
  color: white;
	background-color: black;
}

Vous pouvez également l'utiliser pour cibler les 3 premiers enfants d'un élément avec:nth-child(-n+3). Ou vous pouvez styliser 1 élément sur 5 avec:nth-child(5n).

Certaines pseudo classes ne sont utilisées que pour l'impression, comme:first,:left,:right, vous pouvez donc cibler la première page, toutes les pages de gauche et toutes les pages de droite, qui ont généralement un style légèrement différent.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: