Pseudo-classes ou pseudo-elements ?

Vous avez sûrement tous déjà utilisé des pseudo-classes ou des pseudo-elements. Tout ceux qui ont déjà fait du CSS ont utilisé ces qualifieurs de sélecteur.

Pourtant peu de gens connaissent la différence entre les pseudo-elements et les pseudo-classes. D'ailleurs si je vous demande, selon vous ::after est une pseudo-classe ou un pseudo-element ?

Différenciation

::after est un pseudo-elements. Depuis CSS 2.1 les pseudo-elements sont différenciés des pseudo-classes par :: plutôt que : pour les dernières.

Avant, que ce soit les pseudo-éléments ou les pseudo-classes, tout le monde devait se contenter des :.

Pourquoi CSS 2.1 a-t-il voulu différencier ces deux types de sélecteurs ? Si la différenciation était nécessaire dans la forme c'est sûrement que le fond devait nécessiter une certaine clarification.

La vrai différence — et le fait qu'une pseudo-classes n'est pas un pseudo-element — est la cible.

• Mon sélecteur cible le contenu d'un élément. Je vais agir sur ce contenu comme s'il s'agissait d'un élément HTML. Il s'agit d'un pseudo-element.
• Mon sélecteur cible un élément HTML dans un état particulier. C'est le navigateur qui me fournit l'information sur cet état. Il s'agit d'une pseudo-classes.

Sémantiquement parlant on comprend assez bien pourquoi pseudo-elements. Par contre pour pseudo-classe c'est pas aussi limpide.

En fait c'est parce que les différents états d'un élément du DOM sont souvent gérés avec des classes par les développeurs. jQuery UI va indiquer qu'un sous-memu est ouvert avec ui-accordion-header-active par exemple.

Cette information, représentée par la classe, est géré par le développeur. Mais il y a des informations que le navigateur est capable de fournir sans intervention des développeurs. Coté CSS, un développeur utilisera ce sélecteur, cette information, comme une classe mais il ne s'agit pas vraiment d'une classe. C'est une pseudo-classe.

Quelques pseudo-elements

Il n'y a pas beaucoup de pseudo-elements. Mais regardons par l'exemple si ça se vérifie.

• p::first-line : sélectionne la première ligne de tous les paragraphes.
• p::first-letter : sélectionne la première lettre de tous les paragraphes.
• a::after : sélectionne et ajoute du contenu après le texte de tous les liens.

A chaque fois, on est bien dans la sélection ou le travail sur une partie du contenu.

Quelques pseudo-classes

On fait pareil pour les pseudo-classes qui sont beaucoup plus nombreuses.

• input:focus : sélectionne les inputs qui ont le focus.
• a:visited : sélectionne les liens déjà visités
• li:hover : sélectionne les éléments de liste survolé par la souris

A chaque fois, on sélectionne bien un élément par rapport à une information que l'on pourrait ajouter nous même dans les classes mais qui est fourni automatiquement par le navigateur.

Pourquoi cette question ?

Honnêtement, personne ne vous en voudra de ne pas savoir la réponse à cette question. Mais un peu de culture générale n'a jamais fait de mal à personne.

Après je ne saurais que vous conseiller à apprendre les réponse à ce genre de questions.

• Les recruteurs aime bien les poser pour éliminer facilement des candidats.
• Savoir la réponse à ce genre de question vous fera toujours passer pour quelqu'un qui maitrise les technos qu'il utilise. Alors que pas forcément...
• Mieux comprendre le langage que l'on utilise permet souvent de résoudre plus simplement les problèmes que l'on rencontre dans nos projets.

---

Tweetez moi si vous avez des questions ou des remarques. Et bien-sûr, n'hésitez pas à partager si vous avez aimé cet article.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.