Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

Tags: css,css3,css-selectors,w3c,pseudo-element

Problem :

Some questions about using CSS to specify the color of selected text:

  1. https://developer.mozilla.org/En/CSS/::selection says that,

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

    Why was it removed?

  2. Imagine that a rule like the following exists in the default CSS that's implemented by the browser:

    ::selection { background-color: Highlight; color: HighlightText; }

    Further imagine that a rule like the following is defined in any site-specific authored stylesheet:

    body { background-color: white }

    Given these rules, what would the background color of selected body text be: would it be white, or Highlight?

    Perhaps the rule in the author stylesheet should override the default rule: because according to specificity, body is just as specific as ::selection and is specified later (and should therefore override the previous entry).

    On the other hand, that would result in text being invisible when it's selected (because if Highlight is blue and HighlightText is white so that selected text is white-on-blue, then overriding the background-color of selected text so that it's white would result in its being white-on-white).

  3. Assuming that the behaviour in step 2 is undesirable, how to avoid it?

    • Say that it's a bug in the user stylesheet, which shouldn't ever specify background-color without also specifying color?

    • Say that body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector?

Solution :

Type selectors (e.g. body) and pseudo-element selectors (e.g. ::selection) do indeed have the same specificity, but specificity only comes into play when two selectors select the same element.

The body selector doesn’t select selected text, or any text at all — it selects the <body> element. It’s the element, and not its text, that has the background colour.

Whereas ::selection selects an imaginary element that surrounds currently selected text on the page. So there’s no conflict between styles set on body and ::selected, because the selectors select different things.


Imagine you had the following HTML:

    I am some body text.

    <p>I am some text in a paragraph.</p>

And the following CSS:

p {
    background-color: red;

body {
    background-color: white;

Both selectors have the same specificity, but the <p>’s background will still be red, because it’s not the <body> element.

The same is true if you replace p with ::selection — selected text’s background will be red, because text within the <body> element is not the <body> element.

So, basically, what you said here:

body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector

    CSS Howto..

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to define different css based on element changing number

    In how many ways and places we can place comment in CSS?

    How to do valid CSS for li text and li text with image?

    How can I select first element with a specific class

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    How to set outline without using CSS outline property?

    How to resize image on window resize in CSS?

    How do I set a CSS url to an absolute location?

    How to put image and input on the same line with css

    Make a slide show by fading in background images [closed]

    How to add a class to an element with CSS

    CSS Icons are working locally in the app, but are not showing on Heroku?

    How to apply CSS to a Mac Chrome Select Box?

    how to relocation dropdownmenu by CSS

    How did Blizzard achieve the layered cockpit view for the Starcraft II website?

    Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

    How does a document reference an SCSS file?

    How do I use transitionend in jQuery?

    How to embed css in xml?

    How to Make the Content 100% height and equal height columns in this layout?

    How to use jQuery to fade in/out li a:hover css background-color?

    How to make interactive logo design without flash?

    How to get to be the same width as

    How to make a titled box with css?

    How to place divs one next to another without floatant?

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    How to check if a css rule exists

    How to specify the position of sub-menu div and prevent the menu div changed

    How can I align a div at the edge of a div above it when said div is using automatic positioning?