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.

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


    CSS Howto..

    How to style an asp.net menu with CSS

    How to make menu fold like paper using CSS?

    How to get CSS height value (rather than calculated height) in jQuery

    How to make div box actually touching the side of the browser as mine has a gap?

    How can i use ng-class variable from controller?

    CSS position: absolute - understanding how to center text inside a div box

    How to make the hover attributes stays when it is clicked/active?

    How make something like Facebook Notifications?

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How to change font size for safari and opera but not chrome in CSS file.

    How do I align these boxes using bootstrap?

    How to change CSS with jQuery change and this

    How to remove/add jQueryUI CSS theme from specific element?

    How to change comma separated css values with Jquery.css Method?

    How to write this 'OR' CSS selector?

    How can I make my container transparent without making the whole site transparent too?

    How to do CSS nth-child in span tags?

    how are large quantities of css templates produced?

    how to change the opacity of the text along with the colorscale of the image in css?

    How to make a bullet list align with text in css?

    How to change an image on click using CSS alone?

    How do I style a circular vertically-loading progress bar?

    How to display Highcharts in rows (5)

    How to change color of button in active state using inline CSS?

    How to display items side by side until window width then in next row

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How do I make an erasing animation in CSS? [closed]

    How do I align a dropdown menu below a
    ?

    How to convert a 'div' into a dropdown using CSS/Jquery