::selection example

::selection Pseudo-Element Example

Unfortunately, the ::selection element does not work the same in all web browsers. For Firefox it is coded slightly differently, using "::-moz-selection" instead of "::selection" to declare the pseudo-element. I have found that writing the code for both types will create the same results in both Firefox and Chrome.

The ::selection Pseudo Element transforms text selected.
=> Select this text with your mouse to see how it works.

Now select this text to see the difference.

Here is the code.

In the document head or the style sheet. If you want the code to work in multiple browser types, use both CSS declarations in the head or style sheet.

div.selectionExample::selection {
					color : red;
			    		background-color: lime ;
 }

If you want the code to work in Firefox, you must use the following code. But I have found the class name only needs to be declared once in the HTML document.

div.selectionExample::-moz-selection {
					color : red;
			    		background-color: lime ;
 }

In the HTML body

<div class="selectionExample">

				The ::selection Pseudo Element transforms text selected. 
				<br />
				=> Select this text with your mouse to see how it works.
</div>			
				<br />
				Now select this text to see the difference.