CSS Master

01-selectors/pseudo-el-selection.html (excerpt)

::selection {

background: #9f0;

color: #600;

}

ThisCSSaddsalimegreenbackgroundtoanyelementtheuserhighlights,and
changesthetextcolortoadeepred.Theexampleworksineverybrowserthat
supports::selection,andyoucanseetheeffectinFigure1.24.

Figure 1.24. Deep red text on a lime green background set using the ::selection pseudo-element

Color Combinations

Whenselectingforegroundandbackgroundcolorstousewith::selection,

keepaccessibilityinmind.Somecolorcombinationsfailtogenerateenough

contrasttobereadbylow-visionusers.Othercolorcombinationsmaybeillegible

forcolor-blindusers.Besuretouseacontrastcheckerandcolor-blindnesssimu-

latorbeforeselectingyourfinalcolors.

Selectors 37