MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 9061 of ::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 9061
  • Created:
  • Creator: rubena
  • Is current revision? No
  • Comment added info for IE9; 3 words added, 2 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

The ::-moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user.

Examples

/* 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; }

Notes

Gecko/Firefox supports ::-moz-selection, use also ::selection for some other browsers.

The following properties apply to ::-moz-selection :
color, background and background-color (background-image is ignored).

Specifications

::selection was drafted for CSS3 Selectors but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue.

Browser compatibility

Requires two different rules with identical declarations as stated in the examples above.

Browser Lowest Version Support of
Internet Explorer 9 ::selection
Firefox (Gecko) 1.0 (1.5) ::-moz-selection
Opera 9.5 ::selection
Safari (WebKit) 1.1 (100) ::selection

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>The<code> ::-moz-selection </code>(<code>::selection</code>) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user.</p>
<h3>Examples</h3>
<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>Notes</h3>
<p>Gecko/Firefox supports<code> ::-moz-selection</code>, use also<code> ::selection </code>for some other browsers.</p>
<p>The following properties apply to<code> ::-moz-selection</code> :<br>
<code>color, background </code>and<code> background-color </code>(<code>background-image </code>is ignored).</p>
<h3>Specifications</h3>
<p><code>::selection </code>was drafted for <em>CSS3 Selectors</em> but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215//#UIfragments" target="_blank" title="http://www.w3.org/TR/2005/WD-css3-selectors-20051215//#UIfragments">CSS 3 Selectors (Draft 2005-12-15)</a> Obsolete</li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#selection" title="http://www.w3.org/TR/css3-selectors/#selection">CSS 3 Selectors #selection</a> Working draft</li>
</ul>
<h3>Browser compatibility</h3>
<p>Requires two different rules with identical declarations as stated in the examples above.</p>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>9</strong></td> <td><code>::selection</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.5)</td> <td><code>::-moz-selection</code></td> </tr> <tr> <td>Opera</td> <td><strong>9.5</strong></td> <td><code>::selection</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.1</strong> (100)</td> <td><code>::selection</code></td> </tr> </tbody>
</table>
Revert to this revision