::selection - Sélecteur CSS

Pseudo-élément ::selection - Description

Le pseudo-élément ::selection cible le texte, ou un élément quelconque, lorsqu'il est sélectionné.

Assez peu de propriétés sont prises en compte lorsqu'elles sont appliquées au sélecteur ::selection. Voici les principales :

• Définition des couleurs d'avant-plan et d'arrière-plan : color et background-color.
• Choix de la forme du pointeur de la souris et de la couleur du curseur de texte : cursor et caret-color.
• Les propriétés (encore peu supportées) qui définissent le format des traits de rayure : stroke-color, fill-color et stroke-width.

Pseudo-élément ::selection - Exemples d'utilisation.

Exemple simple : changer les couleurs du texte sélectionné.

Cet exemple ne joue que sur les couleurs de premier plan et d'arrière-plan. Il devrait fonctionner sur tous les navigateurs.

Ne plus matérialiser la sélection.

On peut facilement donner l'impression que la sélection est désactivée : il suffit d'appliquer une couleur d'arrière-plan transparente au sélecteur ::selection. Mais attention, bien que la sélection ne soit plus matérialisée à l'écran elle est cependant réalisée. Pour désactiver réellement la possibilité de sélection, reportez-vous à la propriété user-select.

Cet exemple montre également que ::selection s'applique aux zones de saisie telles que textarea. Vous pourrez vérifier dans cette zone que la sélection est bien réalisée en supprimant le texte après sélection.

Changer l'aspect de l'élément ou du texte sélectionné.

Un style particulier a été appliqué à la sélection sur ce paragraphe : il est barré. Attention, tous les navigateurs n'appliquent pas ces propriétés au sélecteur ::selection

Rendre un texte flou lorsqu'il est sélectionné.

Rendre un texte flou est possible mais oubliez la propriété filter, elle n'est pas utilisable avec ::selection. Il suffit d'appliquer une ombre à ce texte et de rendre le texte transparent (l'ombre n'est pas touchée).

Pseudo-élément ::selection - Compatibilité des navigateurs.

Le pseudo-élément ::selection est bien reconnu par les navigateurs actuels, mais les exemples ci-dessus montrent que les propriétés normalement prises en charge ne le sont pas toutes, en fonction du navigateur utilisé.

1

Pseudo-élément
::selection

Estimation de la prise en charge globale.

83%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-élément ::selection - Historique.

• Module CSS - Pseudo-éléments - Niveau 4

  Concernant ::selection Introduction d'un nouveau sélecteur par pseudo-élément : ::selection.
  

  15 Janvier 2015

  Document de travail.

  

  

  

Voir aussi...

Les pseudo-éléments sont décrits dans le module de spécification "module CSS - Pseudo-éléments". Il y en a beaucoup mais voici ceux qui s'occupent de cibler le texte sélectionné.