Style Selected Text With CSS

CSS lets you change how highlighted text looks with the ::selection pseudo-element. It is a small detail, but matching the selection colours to a site’s palette can look rather nice.

::selection {
  background: navy;
  color: white;
}

That rule applies across the page. You can also limit it to a particular element:

article p::selection {
  background: gold;
  color: black;
}

Only a small set of properties applies to selected text, so keep the styling simple. Background and text colours are the useful pair.

Check their contrast as well. Selection is supposed to make text easier to identify; a subtle brand colour that hides the words rather misses the point.

← Back to all articles