On confond souvent les deux puisque dans les deux cas on place deux-points (:) devant… Voici donc comment les distinguer.

Les pseudo-classes en CSS2.1

  • :link : liens non visités
  • :hover : élément pointé visuellement (survolé)
  • :active : élément activé par l’utilisateur. Intervient entre la pression sur le bouton et son relâchement
  • :focus : élément pointé physiquement, grâce à la touche tab du clavier par exemple, ou après le relâchement du bouton gauche de la souris
  • :visited : lien déjà visité par l’utilisateur
  • :lang() :élément en fonction de sa langue (spécifié par l’attribut lang)
  • :first-child : premier élément enfant

Il n’y a ici que les sélecteur CSS2.1.

Les pseudo-éléments en CSS2.1

  • :before : insère un contenu avant un élément et le style « à la volée »
  • :after : insère un contenu après un élément et de style « à la volée »
  • :first-letter : style la première lettre d’un élément
  • :first-line : style la première ligne d’un bloc

Comment différencier les pseudo-classes des pseudo-éléments ?

A force d’utilisation, on se rend compte que la différence entre les deux est simple à distinguer.

  • Pseudo-classe : cible un élément sans ajouter de classe
    Exemple : au lieu de :first-child, on aurait pu ajouter la classe first sur l’élément qu’on souhaitait cibler
  • Pseudo-élément : chose que l’on n’aurait pas pu cibler autrement qu’en rajoutant un élément
    Exemple : à la place de :first-letter, on aurait dû ajouter un élément span sur la première lettre de l’élément ciblé

CSS3 à la rescousse !

Le CSS3 propose une nouvelle syntaxe pour les pseudo-éléments, a la place du « : », il faudra mettre « :: » (deux fois deux-points). La syntaxe d’une pseudo-classe reste elle inchangée.

Pour ceux qui veulent aller plus loin sur CSS3, voici les nouveautés apportées par cette mouture :
Nouvelles pseudo-classes en CSS3 :

  • :nth-child(N) : cible le Nième élément enfant
  • :nth-last-child(N) : cible le Nième dernier élément enfant
  • :nth-of-type(N) : cible le Nième élément d’un type donné
  • :nth-last-of-type(N) : cible le Nième dernier élément d’un type donné
  • :last-child : cible le dernier élément enfant
  • :first-of-type : cible le premier élément d’un type donné (équivaut à nth-of-type(1))
  • :last-of-type : cible le dernier element d’un type donnée (équivaut à nth-last-of-type(1))
  • :only-child : cible un élément s’il est l’unique enfant
  • :only-of-type : cible un élément s’il est l’unique enfant ce de type
  • :root : cible l’élément racine du document
  • :empty : cible un élément sans enfant
  • :target : cible un élément pointé par son identifiant dans l’URL (ancre)
  • :enabled : cible les éléments de l’interface qui sont activés
  • :disabled : cible les éléments de l’interface qui sont désactivés
  • :checked : cible les éléments cochés (bouton radio ou case à cocher)
  • :valid : cible les éléments de formulaire respectant la valeur attendue
  • :invalid : cible les éléments ne respectant pas la valeur attendue
  • :not(selector) : cible les éléments qui ne correspondent pas au sélecteur entre parenthèses.

Nouveaux pseudo-éléments de CSS3 :

  • Utiliser les mêmes que CSS2 avec un « :: » devant
  • ::selection : permet de styler du texte sélectionné (couleur de fond, couleur de texte)

Vous avez compris les différences ?