::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 :

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é.

Colonne 1
Support du pseudo-élément ::selection ciblant le texte ou les éléments sélectionnés.
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

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

Autres sélecteurs par pseudo-éléments.

Les pseudo-éléments sont décrits dans le module de spécification module CSS - Pseudo-éléments (CSS Pseudo-Elements Module ).

Sélecteurs :

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::before
Pseudo-élément désignant l'emplacement situé juste avant un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::marker
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
::placeholder
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.