Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the
color property for you.
C is for
color property is used to change the color of text on the page, but what about the color of selected text?
::selection pseudo element, text highlighted with the mouse can be styled. There are only a handful of properties that can be altered when styling the selected text. These are limited to:
Even though you’re limited in the properties you can style with
::selection, you can still use the cascade to set different selection colors for different parts of the page.
Test out this feature by highlighting some text in each of the paragraphs in the Codepen result.
In Firefox the
::selection pseudo element still needs a
-moz prefix and due to the way pseudo elements are parsed, a separate selector and block of styles is required; comma separating the two selectors won’t work.
/* this won't work */
/* do this instead */
There are a couple of great places to find and create color schemes for your projects. The following are some that I’ve found useful in the past: