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

StackOverflow https://stackoverflow.com/questions/4499918

Question

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?

Was it helpful?

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.

Example

Imagine you had the following HTML:

<body>
    I am some body text.

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

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

OTHER TIPS

The following style:

body { background-color: white }

applies to background color of your page.

On the other hand, this rule:

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

applies styles when you select text on your page.

So they do completely different things and there is no question of collision between them.

Why was it removed?

Well that would be a question you would have to ask of the W3C committee that removed it from the draft. My understanding is there has been a lot of internal turmoil within the W3C community since they began writing the HTML5 and CSS3 drafts. Certain individuals that run projects developing the browsers (and I wont go into names) wanted it done one way, and developers be damned. The developer community wanted it done another way, and so began feud over who should control the W3C.

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

Sarfraz hit it on the head here, the :selection pseudo-class will only effect selected text. So in your example when you highlight something the background color changes to Highlight, when it is unselected it returns to white.

I haven't tested this particular example but here is what I understand of it

::selection will override the background color once the selection is made, and will bring it back to the body{background-color: white;} once the text is deselected.
we just have to make sure to always give a proper color and background values to both the selection and the main style.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top