:: sélection - Astuces CSS | CSS Almanach 2025

À l'aide de votre curseur, sélectionnez cette phrase. Remarquez comment lorsque vous sélectionnez le texte, une couleur d'arrière-plan remplit l'espace? Vous pouvez modifier la couleur d'arrière-plan et la couleur du texte sélectionné par style ::selection. Le style de ce pseudo élément est idéal pour faire correspondre le texte sélectionné par l'utilisateur à la palette de couleurs de votre site.

p::-moz-selection ( color: red) p::selection ( color: red; )

Notez que le double deux-points est nécessaire dans la syntaxe de ce pseudo élément, bien que les autres pseudo éléments acceptent un seul deux-points.

Comme vu ci-dessus, vous pouvez appliquer un style ::selectionà des éléments individuels. Vous pouvez également styliser la page entière en déposant le pseudo élément nu dans votre feuille de style.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Il n'y a que trois propriétés qui ::selectionfonctionneront avec:

color
background( background-color, background-image)
text-shadow

Voir les tests de sélection Pen :: par Chris Coyier (@chriscoyier) sur CodePen.

Si vous essayez de créer ::selectionun style avec une propriété qui ne figure pas dans la liste, cette propriété sera ignorée. Cela peut être difficile à voir backgrounddans cette liste car la propriété ne rendra une couleur que lorsqu'elle est utilisée ::selectionet ne rendra pas une image d'arrière-plan ou un dégradé.

N'essayez pas non plus ceci:

p::-moz-selection, p::selection ( color: red; )

Lorsque les navigateurs trouvent une partie d'une sélection qu'ils ne comprennent pas, ils la lâchent en entier, ce qui échouera tout le temps.

L'une des utilisations les plus utiles ::selectionest de désactiver une text-shadowpendant la sélection. Un text-shadowpeut entrer en conflit avec la couleur d'arrière-plan de la sélection et rendre le texte difficile à lire. Réglez text-shadow: none;pour rendre le texte clair et facile à lire lors de la sélection.

Voir le texte-ombre Pen :: selection de Chris Coyier (@chriscoyier) sur CodePen.

Fantaisie :: sélection

Associé à Sass, ou à tout autre préprocesseur, vous pouvez créer des effets vraiment sympas avec ::selection. Sélectionnez le texte dans la démo ci-dessous:

Vous remarquerez peut-être que l'effet n'est pas aussi fluide dans certains navigateurs. Classons cette démo sous: les choses qui sont possibles, mais probablement juste pour le plaisir.

Une autre petite astuce stupide mais amusante consiste à révéler une image à travers le texte sélectionné.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.