Firefox :: - moz-selection selector bug (?) Is there a workaround?

Question

I am working on a site with a lot of color styles, around 250 lines of CSS, to define one of 7 color schemes, so it is important that I keep the different color rules grouped as best as possible.

The newest RC browser, Firefox 4, does not work well when I try to use stacks that belong to the deprecated CSS3 ::selection pseudo-element.

It works:

 .green ::-moz-selection { /* 'Pure Hue' Color */ background-color: #62BA21; color: white; } 

But as soon as I try to share this rule with the selector for webkit, it will break.

Doesn't work for FireFox:

 .green ::selection, .green ::-moz-selection { /* 'Pure Hue' Color */ background-color: #62BA21; color: white; } 

I understand that they may not address the error, since ::selection no longer present in the working draft, but I would prefer that I do not have to inflate my CSS more than this for this quirk.

Answer 1

Firefox doesn't seem to understand ::selection (therefore, it requires the prefix ::-moz-selection provider), so it ignores the whole rule when looking for an unrecognized selector by specification .

A common workaround for a browser that does not understand one or more selectors in a group is to split / duplicate a set of rules:

 /* Firefox sees this */ .green ::-moz-selection { background-color: #62BA21; color: white; } /* Other browsers see this */ .green ::selection { background-color: #62BA21; color: white; } 

In fact, in this case, this is the only thing you can do, i.e. you have to put up with this little bloat.

jsFiddle demo