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

Question

I'm working on a site that has a large number of color styles, around 250 lines of CSS to define one of 7 color schemes, so it's important that I keep the various color rules grouped as best I can.

The newest RC of Firefox 4 is behaving badly when I try and stack selectors relating to the deprecated CSS3 ::selection pseudo element.

This works:

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

But once I try and share the rule with the selector for webkit it breaks.

Does not work for FireFox:

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

I understand they might not be addressing the bug since ::selection is no longer present in the working draft, but I'd prefer if I didn't have to bloat my CSS any more than it already is for this quirk.

Answer 1

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set:

/* 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 it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.

jsFiddle demo