How to combine this css?

Question

..

.box_content ::selection {
 background:#CCCC33; /* Safari */
}
.box_content ::-moz-selection {
 background:#CCCC33; /* Firefox */
}

Anyone know if I can combine those like this?

.box_content ::selection .box_content ::-moz-selection {
 background:#CCCC33;
}

Or maybe like:

.box_content ::selection, .box_content ::-moz-selection {
 background:#CCCC33;
}

Honestly my mind is not there today.

Answer 1

Your second example should work fine.

Answer 2

The second one is correct. You can use a comma to separate css selection rules.

So given:

selector-rule1, selector-rule2 {
    style-x;
    style-y;
}

This will apply style-x & style-y to anything that matches either selector-rule1 or selector-rule2.

---

Just to explain why your first example won't work, its because spaces imply ancestor-descendant relationships, so if you have:

selector-rule4 selector-rule4 {
    style-z;
}

Then style-z will be applied to anything that matches selector-rule4 if it is also an an ancestor of something that matches selector-rule3.

More info on selectors here.

Answer 3

You need to use a comma to group the selectors:

.box_content ::selection, .box_content ::-moz-selection {
   background:#CCCC33;
}

Answer 4

Your second example can’t work because a browser has to ignore the complete rule:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

Opera and Webkit can’t parse the Gecko proprietary selector and Gecko can’t parse the regular ::selection. So the rule will never be applied.