CSS ::selection Selector

What is CSS ::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 browser.
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.

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.

<!DOCTYPE html>
<html>
<head>
  <title>CSS ::selection Selector</title>
  <style>
    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>
</html>

Run it...   »

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.