Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Pseudo-éléments

De la même façon que les pseudo-classes, les pseudo-éléments sont ajoutés aux sélecteur pour décrire un état spécial. Ils permettent ainsi de mettre en forme certaines parties du document. 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.

Syntaxe

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

Liste des pseudo-éléments

Exemples

CSS

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

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

Notes

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 « : ».

Note : ::selection sera toujours préfixé par deux deux-points (::).

Note : On ne peut utiliser qu'un pseudo-élément par sélecteur. Celui-ci doit apparaître après les sélecteurs simples de la déclaration.

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

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, wakka27, Delapouite, FredB, tregagnon
 Dernière mise à jour par : SphinxKnight,