— Publié le 19 mai 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 vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !
Laisser un commentaire