::selection

Select any or all of the text below for an example of the ::selection pseudo element.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


The default selection style is white text on a blue background. The following code was added to the CSS to change the selection colors:
::selection {
color: orange;
background-color: var(--dark-blue);
}
The code above styles the whole enchilada. If you wanted to add multiple selection styles you would simply style individual elements like this p::selection {desired properties}, or by creating classes like this .example::selection {desired properties} don't believe me? Go ahead select text in this paragraph and see what happens. It's important to note that the only properties that selection will work with. They are:

  1. color
  2. background
  3. text-shadow

Back