Comprendre les pseudo classes en CSS

Comprendre les pseudo classes en CSS

Publié le 3 mars 2018

En CSS, les pseudo classes sont ajoutées à un sélecteur afin de modifier le comportement d’un élément html spécifique. Vous pouvez les reconnaître facilement dans les fichiers css car elles commencent toutes par « : ».

Il en existe beaucoup mais dans cet article, nous allons vous présenter les principales que nous classons en 2 groupes (les autres concernent essentiellement les formulaires).

 

Les Pseudo classes Liens

Ce sont les pseudo classes que vous connaissez tous sans savoir que ce sont des pseudo classes. Les voici :

  • :link permet de définir le style d’un lien non visité
  • :visited permet de définir le style d’un lien une fois visité
  • :hover permet de définir le style d’un lien au survol de la souris
  • :active permet de définir le style d’un lien lors d’un clic
  • :focus permet de définir le style d’un lien lors qu’un focus est actif : sélectionné à l’aide du clavier ou activé avec la souris comme par exemple le champ d’un formulaire.

Si vous voulez attribuer plusieurs de ces pseudo classes à votre élément, veillez à bien respecter l’ordre mentionné ci-dessus.

Sachez également que nous attribuons souvent ces pseudo classes à des liens mais vous pouvez les attribuer à un autre type d’élément, comme un paragraphe par exemple.

 

Les Pseudo classes Position

Ce sont les pseudo classes qui permettent de cibler un élément enfant spécifique parmi des éléments de même type et son parent :

  • :first-child permet de définir le style du 1er élément enfant par rapport à son parent
  • :last-child permet de définir le style du dernier élément enfant par rapport à son parent
  • :nth-child(n) permet de cibler certains enfants d’un élément HTML. La valeur entre parenthèse peut être un chiffre ou un mot-clé. Pour vous donner quelques exemples :
    • :nth-child(odd) permet de cibler tous les éléments impairs
    • :nth-child(even) permet de cibler tous les éléments pairs
    • :nth-child(2) permet de cibler le 2è élément
    • :nth-child(10n+1) permet de cibler les 11è, 21è, 31è éléments

Il existe de multiples combinaisons possibles. Si vous voulez comprendre leur fonctionnement de manière plus détaillée, nous vous invitons à lire notre article sur le sujet : first-child, last-child, nth-child : les pseudo classes Position

 

Conclusion

Voilà, nous espérons que cet article vous aura éclairé sur la notion de Pseudo classes. Nous vous en proposerons un autre bientôt sur les Pseudo éléments.
Si cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. Et n’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

1 Avis

  1. lfenton 9 mois ll y a

    Merci beaucoup !Ça a déjà bien commencé.

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.