Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le pseudo-élément ::selection permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).

::selection {
  color: gold;
  background: red;
}

Propriétés autorisées

Seul un sous-ensemble des propriétés CSS peut être utilisée pour une règle dont le sélecteur contient ::selection :

On notera que background-image est ignoré, comme les autres propriétés.

Note : L'utilisation de text-shadow pour les règles dont le sélecteur ::selection est possible dans Chrome, Safari et Firefox 17+.

Note : Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, elle a été retirée dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie (selon une discussion de la liste de diffusion W3C Style).

Le pseudo-élément ::selection a de nouveau été ajouté dans la spécification pour les pseudo-éléments de niveau 4.

Syntaxe

/*Syntaxe propre à Firefox */
::-moz-selection
::selection

Exemples

Gecko est le seul moteur de rendu qui nécessite un préfixe pour ce pseudo-élément. Étant donné qu'une règle complète est considérée comme invalide lorsqu'un pseudo-élément inconnu est utilisé, il faut donc déclarer deux règles séparées : ::-moz-selection et ::selection {...}.

CSS

/* du texte sélectionné sera jaune sur fond rouge */
::-moz-selection {
  color: gold;
  background: red;
}

::selection {
  color: gold;
  background: red;
} 

/* le texte sélectionné dans un paragraphe */
/* sera blanc sur noir                     */
p::-moz-selection {
  color: white;
  background: black;
}

p::selection {
  color: white;
  background: black;
}

HTML

<div>Un peu de texte pour tester ::selection.</div>
<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Pseudo-Elements Level 4
La définition de '::selection' dans cette spécification.
Version de travail Définition initiale.

Le pseudo-élément ::selection faisait partie du brouillon pour la spécification des sélecteurs pour CSS 3 mais a été retiré avant que le document soit une recommandation. Il fut ajouté de nouveau pour le brouillon de la spécification pour les pseudo-éléments CSS de niveau 4.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1 1.0 -moz[1] (Oui) 9 9.5 1.1
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? (Oui) ? ? ?

[1] Gecko ne supporte actuellement que la version préfixée : ::-moz-selection. Ce pseudo-élément ne sera plus préfixé lorsque le bug bug 509958 sera résolu.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Matdonell, BenoitEsnard, tregagnon, teoli, louuis, FredB
 Dernière mise à jour par : SphinxKnight,