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
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
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 |