For some reason, a ::selection
declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection
anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important
declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores the whole selector (even if they are comma separated). There are some exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.