Pseudo-éléments

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément ::first-line permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

css
/* La première ligne de chaque élément <p>. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Note : À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

Syntaxe

sélecteur::pseudo-élément {
  propriété: valeur;
}

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

Liste des pseudo-éléments

Exemples

CSS

css
p::first-line {
  color: blue;
}

HTML

html
<p>
  C’était le Lapin Blanc qui revenait en trottinant, et qui cherchait de tous
  côtés, d’un air inquiet, comme s’il avait perdu quelque chose ; Alice
  l’entendit qui marmottait : « La Duchesse ! La Duchesse ! Oh ! mes pauvres
  pattes ; oh ! ma robe et mes moustaches ! Elle me fera guillotiner aussi vrai
  que des furets sont des furets ! Où pourrais-je bien les avoir perdus ? »
  Alice devina tout de suite qu’il cherchait l’éventail et la paire de gants
  paille, et, comme elle avait bon cœur, elle se mit à les chercher aussi ; mais
  pas moyen de les trouver.
</p>

Résultat

Navigateur Version minimale Prise en charge de :
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

Voir aussi