mozilla

Revision 9060 of ::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 9060
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 1 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 --- ---
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>---</td> <td>---</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