Difference entre une pseudo-classe et un pseudo-element

En CSS3, une pseudo-class est désigné par l’utilisation du deux-points : (exemple :hover) alors qu’un pseudo-élément est désigné par le double deux-points :: (exemple ::first-letter).

Ormi cette différence de syntaxe, il existe aussi une différence de rôle entre ces deux types de sélecteur.

Pseudo-classe

Une pseudo-class permet d’appliquer un style sur chaque élément qu’elle cible sans qu’il soit nécessaire de lui rajouter une classe supplémentaire. Il évite l’utilisation de l’attribut HTML class sur chaque élément de la cible d’où son rôle de ‘pseudo’

Pour mieux comprendre son rôle nous allons partir d’un exemple concrêt. Nous souhaitons par exemple appliquer une couleur rouge au premier élément d’une liste.

<ul>
  <li>liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
  <li>liste 5</li>
</ul>

Une solution consiste à isoler le premier élément en lui rajoutant une classe

<ul>
  <li class="rouge">liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
  <li>liste 5</li>
</ul>

Ensuite avec le CSS, on utilise un sélecteur de class

.rouge{
  color: red;
}

Résultat

Mais vous pouvez faire « l’économie » d’une class en HTML grâce à l’utilisation de la pseudo-class :first-child. Le code HTML est à nouveau simplifié.

<ul>
  <li>liste 1</li>
  <li>liste 2</li>
  <li>liste 3</li>
  <li>liste 4</li>
  <li>liste 5</li>
</ul>

Ensuite avec le CSS, on utilise la pseudo-classe :first-child

:first-child{
  color: red;
}

Résultat

Vous constatez qu’on peut obtenir le même résultat mais sans rajouter une class HTML.

Pseudo-élément

Un pseudo-élément permet d’appliquer un style sur chaque élément qu’elle cible sans qu’il soit nécessaire de rajouter un autre élement HTML supplémentaire, d’où son rôle de ‘pseudo’

Pour mieux comprendre son rôle nous allons partir d’un exemple concrêt. Nous souhaitons par exemple appliquer un style différent à la première lettre d’un paragraphe.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio laborum officiis autem, aliquid porro iusto totam tenetur et. Animi sunt totam voluptatum sint voluptates odit placeat amet soluta modi.</p>

Une solution consiste à isoler la première lettre avec l’élément HTML span.

<p><span>L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio laborum officiis autem, aliquid porro iusto totam tenetur et. Animi sunt totam voluptatum sint voluptates odit placeat amet soluta modi.</p>

Ensuite avec le CSS, on utilise un sélecteur de balise.

span{
  font-size: 2em;
  color: red;
}

Résultat

Mais vous pouvez faire « l’économie » de l’élement HTML span grâce à l’utilisation du pseudo-élément :first-letter. Le code HTML est à nouveau simplifié.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure optio laborum officiis autem, aliquid porro iusto totam tenetur et. Animi sunt totam voluptatum sint voluptates odit placeat amet soluta modi.</p>

Ensuite avec le CSS, on utilise le pseudo-élément ::first-letter

p::first-child{
  color: red;
}

Résultat

Vous constatez qu’on peut obtenir le même résultat mais sans rajouter un élément HTML supplémentaire.