Menu
Some questions about using CSS to specify the color of selected text:
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 the 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).
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?
469
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-color.
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 ::selection, because the selectors select different things.
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:
bodyisn't a match for selected body text except when the::selectionpseudo-element is specified as part of the selector
179
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
