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

mozilla
Your Search Results

    ::selection

    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: color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow. Note that, in particular, background-image is ignored, like any other property.

    text-shadow in ::selection is supported by Chrome, Safari and Firefox 17+.

    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 has been added again in Pseudo-Elements Level 4.

    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

    Specification Status Comment
    CSS Pseudo-Elements Level 4
    The definition of '::selection' in that specification.
    Working Draft Initial specification

    The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1 1.0 -moz[1] 9 9.5 1.1
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ? ?

    [1] Gecko currently only supports the prefixed version ::-moz-selection. It will be unprefixed in bug 509958.

    Document Tags and Contributors

    Last updated by: Sebastianz,