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

Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

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 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 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 !

Vous voulez encourager l'auteur ?

Don PayPalflattr this!

Laissez-moi un petit mail pour que je puisse vous remercier.

5 commentaires et 5 trackbacks sur “Différence entre pseudo-élément et pseudo-classe”

  1. Felipe dit :
    20 décembre 2011

    ::selection a figuré un temps dans la future norme mais a été supprimé. Ceci dit ça fonctionne encore dans pas mal de navigateurs, autant ne pas s’en priver dans les navigateurs qui peuvent poser problème comme Firefox.

  2. chrishrmnn dit :
    22 décembre 2011

    Merci pour l’article, très intéressant (comme bien souvent).
    Je suis tombé sur un article qui mentionnait deux autres pseudo-class que j’ai trouvé assez intéressante : valid & invalid (à utiliser dans les formulaires avec required).

    Tu n’en parles pas ? Une raison particulière ?
    Merci !

    • Geoffrey dit :
      22 décembre 2011

      Merci Christophe.
      C’est un simple oubli de ma part. Je complète l’article dès que j’ai une meilleure connexion.
      Au plaisir :)

  3. tchatche dit :
    29 décembre 2011

    Merci très intéressant article

  4. Bronco dit :
    5 novembre 2012

    Bon, et bien LA, c’est clair ! \o\ |o| /o/
    Merci (encore ^^)

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

Les sites qui en parlent

 
Le studio web