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 {
  background: cyan;
}

Propriétés autorisées

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

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

Syntaxe

/*Syntaxe propre à Firefox (61 et antérieur) */
::-moz-selection
::selection

Exemples

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

 

 

Accessibilité

Il est recommandé de ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.

Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

  • Si le texte est en gras : 18.66px ou plus grand
  • Sinon 24px ou plus grand

Quelques ressources :

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.

Note : Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré 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.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 1Edge Support complet OuiFirefox Support complet 62
Support complet 62
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 9Opera Support complet 9.5Safari Support complet 1.1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

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