Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

::selection - Sélecteur CSS

::selection

Résumé des caractéristiques du sélecteur ::selection

Description rapide
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
Statut
Standard
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
Statut du document:: WD (document de travail)

Description du pseudo-élément ::selection.

Le pseudo-élément ::selection désigne 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.

Exemples d'utilisation de ::selection.

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

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

La sélection dans ce paragraphe apparaît en couleurs inversées (texte blanc sur fond noir).

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.

La sélection dans ce paragraphe n'est pas visualisée.

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

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

Sélectionnez le texte en entier ou en partie pour visualiser le résultat.

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
::selection
Estimation de la prise en charge en pourcentage du parc actuel.
84%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que ::selection.

Les spécifications CSS éditées par le W3C sont organisées en modules. ::selection fait partie du Module CSS - Pseudo-éléments (CSS Pseudo-Elements Module ). Les définitions suivantes sont également décrites dans ce même module.

Sélecteurs.

Pseudo-élément désignant l'emplacement situé juste après un élément.
Pseudo-élément désignant l'emplacement situé juste avant un élément.
Désigne le bouton dans une zone de saisie du type file.
Pseudo-élément désignant la première lettre du texte.
Pseudo-élément désignant la première ligne du texte.
Pseudo-élément correspondant aux textes comportant des fautes de grammaire.
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
Pseudo-élément désignant le texte d'information dans une zone de saisie.
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
Sélectionne le texte de l'élément désigné par le signet de l'url.