Différence entre pseudo-élément et pseudo-classe

Petit sujet de vocabulaire aujourd’hui pour soulever un problème de différenciation entre la pseudo-classe et le pseudo-élément en CSS.
On a souvent tendance à confondre les deux en se disant que dans les deux cas on place un : (deux-points) devant.
Confusion justifiée, voyons donc comment les distinguer.

Nous allons voir comment les distinguer sur la forme et sur le fond, pour cela essayons déjà de regrouper sur cette pages les pseudo-classes et pseudo-éléments existant (ça évolue, ils ne seront peut-être pas tous), vous verrez peut-être automatiquement comment les différencier.

Les pseudo-classes en CSS2.1

Il en existe des très connues, et des un peu moins, voici celles que j’ai pu relever :

• :link : cible les liens non visités ;
• :hover : cible un élément pointé visuellement (survolé) grâce à une souris par exemple ;
• :active : cible un élément activé par l’utilisateur, par exemple au moment du clic sur le bouton gauche de la souris. Intervient entre la pression sur le bouton et son relachement ;
• :focus : cible un é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 sur un élément pouvant être ciblé de la sorte ;
• :visited : cible un lien déjà visité par l’utilisateur ;
• :lang() : cible un élément en fonction de sa langue (spécifié par l’attribut lang) ;
• :first-child : cible le premier élément enfant.

Je ne parle ici que de sélecteur CSS2.1.

Les pseudo-éléments en CSS2.1

Les pseudo-éléments sont assez peu connus finalement, et voici ce que nous propose CSS2.1.

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

Comment les différencier ?

Au début j’avais un peu de mal, pour moi c’était juste un « pseudo-truc » (pseudo toi-même !), mais au final c’est relativement simple à distinguer à force d’utilisation.

Une pseudo-classe est une manière de cibler un élément sans ajouter une classe (manuellement ou par l’intermédiaire de JavaScript).
Exemple : à la place de :first-child, on aurait simplement pu ajouter la classe first sur le premier élément que l’on souhaitait cibler.

Un pseudo-élément est une 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 !

CSS3 propose une nouvelle syntaxe pour les pseudo-éléments.
En lieu est place du « : » il faudra écrire « :: » (deux fois deux-points). La syntaxe d’une pseudo-classe reste inchangée.
Pendant que je suis, pour ceux qui veulent aller plus loin sur CSS3, voici les nouveautés apportées par cette mouture :

Pseudo-classes

Les nouvelles pseudo-classes en CSS3 :

• :nth-child(N) : cible le N^ième élément enfant ;
• :nth-last-child(N) : cible le N^ième dernier élément enfant ;
• :nth-of-type(N) : cible le N^ième élément d’un type donné ;
• :nth-last-of-type(N) : cible le N^ième dernier élément d’un type donné ;
• :last-child : cible le dernier élément enfant ;
• :first-of-type : cible le premier element 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) ;
• :required : cible les éléments de formulaire définis comme requis (attribut required) ;
• :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.

Pseudo-éléments

Et les 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).

C’est tout pour le nouveau pseudo-élément.

N’hésitez pas à utiliser l’espace de commentaire si vous avez des questions.
À bientôt !