Description »

Styles elements that are selected (ie. highlighted by the mouse).

Details »

When you highlight something with your mouse, you are technically making that highlighted text a selection. This pseudo-element will style any selection of the given element it is defined in.

Note: Unlike the CSS2 pseudo-elements, CSS3 elements require two colons in front of the keyword.

Examples »

If you highlight the text in the next paragraph, you will see that the highlight becomes yellow.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus arcu libero, aliquet sit amet, ornare quis, vulputate a, nibh. Aliquam sit amet lectus vitae ligula feugiat condimentum. Proin eu mauris. Suspendisse ac sem. Cras in quam in augue fringilla porttitor. Nulla facilisi. Aliquam erat volutpat. Morbi consectetuer, libero at iaculis fermentum, dolor velit tincidunt sapien, lacinia ultricies ligula dui eget orci.

This was done with the following code. If you notice no change, this might be due to an outdated browser.

.selectTest p::selection{    background-color: #FF0; }
.selectTest p::-moz-selection{    background-color: #FF0; }

The second of these makes this possible in Firefox browsers.

Try It on the CSS Zone Sandbox!

Base CSS »

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License