8

I'm a big fan of using ::selection and ::-moz-selection to spruce up a website a bit - I hate the default blue and white colours!

However, I find one little thing that really bugs me: I can't put ::selection and ::-moz-selection in the same CSS rule, like this:

::selection, ::-moz-selection {
    background:#8A1920;
    color:#FFFF;
}

jsFiddle link

I find this quite annoying, because it means that if I want to change my background colour (or some other selection style) I have to edit two separate rules. It also violates a policy I follow almost religiously: D.R.Y. (don't repeat yourself).

I tested this in Chrome 28, Chrome Canary 30, Firefox 22, Firefox 23, IE 9 and IE 10 and they all yield the same result. What's going wrong here?

If they must remain separate, is there any way to have them join further on? Something like:

.selected {
    background:#8A1920;
    color:#FFF;
}

::selection {
    @copy-from(.selected); /* I know this line is completely made up */
}

::-moz-selection {
    @copy-from(.selected);
}

Would be really useful.

Robbie JW
  • 729
  • 1
  • 9
  • 22
  • 1
    You can use a CSS preprocessor if you want to only write the rule once, but at the end of the day the preprocessor will still have to expand it out. – thirtydot Aug 07 '13 at 22:03
  • @thirtydot Something like LESS? It seems a bit much to include another script to parse all my CSS just to save writing one extra rule. I take it there's no native CSS method for joining rules then? – Robbie JW Aug 07 '13 at 22:07
  • Yes, something like LESS. It's only worth including LESS if you *really* use it, not if you only use it for something tiny like this. There's nothing you can do in this case to "join the rules" with pure CSS. – thirtydot Aug 07 '13 at 22:08
  • Oh we'll, I guess I'll have to write multiple rules for identical styles. A bit more research yielded [this answer](http://stackoverflow.com/questions/13816764/what-is-the-rationale-behind-dropping-css-rules-with-an-invalid-selector/13831877#13831877), which is a good explanation as to why they **must** be split and why the browser doesn't just ignore the "invalid" selector, if anyone's interested. Thanks for the help. – Robbie JW Aug 07 '13 at 22:13

1 Answers1

6

This is from the documentation:

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them.

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

Daniel Williams
  • 8,673
  • 4
  • 36
  • 47
  • 1
    Aha, so every pseudo-element must be valid within a rule, otherwise the whole rule is dropped? Do I have to write my styles twice or is there a way to join rules (as I also asked)? – Robbie JW Aug 07 '13 at 22:05
  • 2
    As far as I have seen you would have to write them twice. I haven't seen any support in CSS to reference or extend other styles. – Daniel Williams Aug 07 '13 at 22:14