::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 9053
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 14 words added

Revision Content

{{ CSSRef() }}

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

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 is expected to be removed from the final standard. Anyhow, it's implemented in browsers and support will continue.

Browser compatibility

Browser Lowest Version  Support of
Internet Explorer n/a  
Firefox 1.0 ::-moz-selection
Opera 9.5 ::selection
Safari 1.2 ::selection

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">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 class="editable"><span> Examples </span></h3>
<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>
<h3 name="Notes">Notes</h3>
<p>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</code>,<code> background </code>and<code> background-color </code>(<code>background-image </code>is ignored).</p>
<h3 name="Specifications">Specifications</h3>
<p><code>::selection</code> was drafted for <em>CSS3 Selectors</em> but is expected to be removed from the final standard. 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" rel="external nofollow" target="_blank" title="http://www.w3.org/TR/2005/WD-css3-selectors-20051215//#UIfragments">CSS3 Selectors (Draft 2005-12-15)</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th> Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a</td> <td> </td> </tr> <tr> <td>Firefox</td> <td>1.0</td> <td><code>::-moz-selection</code></td> </tr> <tr> <td>Opera</td> <td>9.5</td> <td><code>::selection</code></td> </tr> <tr> <td>Safari</td> <td>1.2</td> <td><code>::selection</code></td> </tr> </tbody>
</table>
<p>Requires two different rules with identical declarations as stated  in the examples above. </p>
Revert to this revision