CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS ::selection Selector


What is ::selection Selector?

CSS ::selection selector select when user select or highlight some text on that time apply CSS.
You must have to write both rule ::selection and ::-moz-selection to apply CSS.
-moz is prefix of Mozilla Firefox broweser.
Still this ::selection selector not release on CSS2 or CSS3, so is not officially.

Only some CSS properties are used inside a ::selection declaration block. like text color, background-color, and text-shadow properties.

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 3.0+
  • Internet Explorer 9+
  • Opera 10+
  • Safari 1.3+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Syntax

General syntax of ::selection selector,

:selection {
	property: value;
	property: value;
	...
}
/* for Mozilla Firefox */
::-moz-selection {  
	property: value;
	property: value;
	...
}

element::selection {
	property: value;
	property: value;
	...
}
/* for Mozilla Firefox */
element::-moz-selection {
	property: value;
	property: value;
	...
}

Example:

CSS ::selection selector select when user select or highlight some text on that time apply CSS.

<style type="text/css">
  p::selection { 
     color: #00000;  
     background-color: #66cbff; 
  }
  p::-moz-selection { 
     color: #00000;   
     background-color: #66cbff;
  }
</style>
</head>
<body>

    <p>This example is selection of every paragraph.</p>

    <p>This example is selection of another one paragraph.</p>

</body>

Run it...   »

Example Result: