::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 9069
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

{{ CSSRef() }}

{{ Non-standard_header() }}

Summary

The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user.

Only a small subset of CSS properties can be used in a rule using ::selection in its selector: {{ cssxref("color") }}, {{ cssxref("background") }}, and {{ cssxref("background-color") }}. Note that, in particular, {{ cssxref("background-image") }} is ignored, like any other property.

Though this pseudo-element was in CSS Selectors Level 3, it was removed during the Candidate Recommendation phase as it appeared that its behavior was under-specified and interoperability wasn't achieved.

The ::selection pseudo-element currently isn't in any CSS module on the standard track and shouldn't be use in production environment,

Examples

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules requires to drop the whole rule when encountering an invalid pseudo-element, two separate rules must be writtent: ::-moz-selection, ::selection {...} would be dropped on non-Gecko browser as ::-moz-selection is invalid on them.

/* draw any selected text yellow on red background */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Specifications

::selection was drafted for CSS Selectors Level 3 but removed before it reaches the Recommendation status.. Anyhow, it's implemented in browsers and support will continue.

Right now, the ::selection CSS pseudo-element is not in any specification on the standard track.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 1.0 {{ property_prefix("-moz") }} 9 9.5 1.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ Non-standard_header() }}</p>
<h3>Summary</h3>
<p>The<code> </code><code>::selection</code> CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user.</p>
<p>Only a small subset of CSS properties can be used in a rule using <code>::selection</code> in its selector: {{ cssxref("color") }}, {{ cssxref("background") }}, and {{ cssxref("background-color") }}. Note that, in particular, {{ cssxref("background-image") }} is ignored, like any other property.</p>
<div class="note">Though this pseudo-element was in CSS Selectors Level 3, it was removed during the Candidate Recommendation phase as it appeared that its behavior was under-specified and interoperability wasn't achieved.<br> <br> The <code>::selection</code> pseudo-element currently isn't in any CSS module on the standard track and shouldn't be use in production environment,</div>
<h3>Examples</h3>
<p>Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules requires to drop the whole rule when encountering an invalid pseudo-element, two separate rules must be writtent: <code>::-moz-selection, ::selection {...}</code> would be dropped on non-Gecko browser as <code>::-moz-selection</code> is invalid on them.</p>
<pre>/* draw any selected text yellow on red background */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }</pre>
<h3>Specifications</h3>
<p><code>::selection </code>was drafted for <em>CSS Selectors Level 3</em> but removed before it reaches the Recommendation status.. Anyhow, it's implemented in browsers and support will continue.</p>
<p>Right now, the <code>::selection</code> CSS pseudo-element is not in any specification on the standard track.</p>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1</td> <td>1.0 {{ property_prefix("-moz") }}</td> <td>9</td> <td>9.5</td> <td>1.1</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
Revert to this revision