AtoZ CSS Quick Tip: Utilizing the Color Property

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for color here.

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.

css-C2.jpg-01

C is for `color`

The color property is used to change the color of text on the page, but what about the color of selected text?

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

color
background-color
cursor
outline
text-decoration
text-shadow

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.

See the Pen tip-c by SitePoint (@SitePoint) on CodePen.

Test out this feature by highlighting some text in each of the paragraphs in the Codepen result.

Vendor prefixes

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 */
::selection,
::-moz-selection {
  color: white;
  background: green;
}

/* do this instead */
::selection {
  color: white;
  background: green;
}
::-moz-selection {
  color: white;
  background: green;
}