Revision 9048 of ::selection

  • Revision slug: CSS/::selection
  • Revision title: ::selection
  • Revision id: 9048
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 30 words added, 15 words removed

Revision Content

{{ CSSRef() }}

Summary

The ::-moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted 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

::selection was drafted for CSS3 Selectors but is expected to be removed from the final standard. Anyhow, it's implemented in Firefox and other browsers.

The CSS properties that apply to ::-moz-selection pseudo-elements are color, background and background-color (background-image is ignored).

Specifications

Browser compatibility

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

 

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 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><code>::selection</code> was drafted for CSS3 Selectors but is expected to be removed from the final standard. Anyhow, it's implemented in Firefox and other browsers.</p>
<p>The CSS properties that apply to <code>::-moz-selection</code> pseudo-elements are<code> color</code>,<code> background </code>and<code> background-color </code>(<code>background-image </code>is ignored).</p>
<h3 name="Specifications">Specifications</h3>
<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> </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>2.0</td> <td><code>::selection</code></td> </tr> </tbody>
</table>
<p> </p>
Revert to this revision