::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 302753
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

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") }}, {{ cssxref("background-color") }} and {{ ccsxref("text-shadow") }}. Note that, in particular, {{ cssxref("background-image") }} is ignored, like any other property.

text-shadow in ::selection is supported by Chrome and Safari and will be supported in Firefox 17 and above.

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase,  as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).

The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.

Examples

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers 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

The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reaches the Recommendation status. Despite this, it's implemented in some browsers, which will probably retain experimental support for it.

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
Basic support 1 1.0 {{ property_prefix("-moz") }} 9 9.5 1.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ Non-standard_header() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <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") }}, {{ cssxref("background-color") }} and {{ ccsxref("text-shadow") }}. Note that, in particular, {{ cssxref("background-image") }} is ignored, like any other property.</p>
<div class="note">
  <p><code>text-shadow</code> in <code>::selection</code> is supported by Chrome and Safari and will be supported in Firefox 17 and above.</p>
</div>
<div class="note">
  Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase,&nbsp; as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html" title="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(based on discussion in the W3C Style mailing list)</a>.<br />
  <br />
  The <code>::selection</code> pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.</div>
<h2 id="Examples">Examples</h2>
<p>Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: <code>::-moz-selection, ::selection {...}</code>. The rule would be dropped on non-Gecko browsers as <code>::-moz-selection</code> is invalid on them.</p>
<pre class="brush: css">
/* 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>
<h2 id="Specifications">Specifications</h2>
<p>The <code>::selection</code> CSS pseudo-element was drafted for <em>CSS Selectors Level 3</em> but removed before it reaches the Recommendation status. Despite this, it's implemented in some browsers, which will probably retain experimental support for it.</p>
<p>Right now, the <code>::selection</code> CSS pseudo-element is not in any specification on the standard track.</p>
<h2 id="Browser_compatibility">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</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>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</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>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revert to this revision