Les pseudos-classes CSS

Il existe de nombreuses pseudo-classes en CSS. Le site developer.mozilla.org en a d’ailleurs fait une liste. Celles qui peuvent le plus nous intéresser sont :

  • :visited et :link qui permettent de cibler les liens déjà visités ou pas encore visités.
  • :hover, :active et :focus, qui ciblent un élément survolé, activé (au moment du clic) ou ayant le focus.
  • :target qui sélectionne l’élément ayant l’id passé dans l’url. Thomas avait expérimenté cette pseudo-classe dans un précédent article.
  • :checked qui cible les éléments cochés (radio bouton ou checkbox) ou sélectionné (select liste)
  • :valid, :invalid ou :required, bien pratique pour différencier les éléments de formulaire obligatoire et mal remplis.
  • :first-child, :first-of-type, :nth-child() pour cibler précisément les éléments du DOM
  • :not() cible les éléments qui n’ont pas la classe passée en paramètre par exemple

J’ai utilisé ces propriétés sur l’exemple suivant : codepen.io/maattt/pen/ZpvQXd

À noter que la pseudo-classe :hover est activée au moment du clic sur certains mobiles (Android, iPhone) mais pas sur tous (Windows Phone). Il est donc conseillé de la coupler avec la pseudo-classe :focus (source).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

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