Have you ever gone to a website and highlight the text and its a different or brand-specific color? Well, this is a simple trick to accomplish. Below is a sample of how to do it, and below that is the explanation in detail:
See the Pen
Change Text Selection Color by George (@ghwoodard)
on CodePen.
If you click on the CSS button at the top, you will see something interesting. The ::selection selector (added after h1 and p) is a CSS keyword added to a selector to let you style a specific part of the selected element. This specific selector applies styles to the part of the text highlighted by the user (such as clicking and dragging the mouse across text).
In this example, the selector is added to the h1 and p tags of the HTML snippet. What this does is:
- Change the
H1(called heading) text to orange and the turquoise background when highlighted. - Change the
P(called paragraph) text to red and the yellow background when highlighted.
That’s it! This is a nifty and excellent tool to utilize to do some sleek branding for your website.
Drop me a line and let me know what you think!
All the best!
