OverDocs

Styling text selection Edit on GitHub In category: CSS

Styling text selection(Applicable in versions: CSS 3+) #styling

One of the unofficial CSS 3 pseudoselectors is ::selection. It allows to change background or color of currently selected text. At this moment, vendor prefixes are required, though.

/* Change selection background for all elements */
::selection {
    background: #ffb7b7;
}
::-moz-selection {
    background: #ffb7b7; /* prefixed version for Gecko */
}

/* Override for specified selector only */
p.important::selection {
    background: red;
    color: white;
}
p.important::-moz-selection {
    background: red;
    color: white;
}

Warning

You can not combine prefixed and unprefixed selector into one, like this: ::selection, ::-moz-selection! This will not work, because when browser can't understand any part of the selector, the whole rule is ignored.

Note

::selection was the part of CSS 3 specification, but it was then removed. Now, it is a part of the CSS Pseudo-Elements Module Level 4.

Learn more #learn-more

Comments #comments