How to combine this css?


Tags: css,stylesheet

Problem :

..

.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.



Solution :

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.


    CSS Howto..

    How I can add td to css style for inputs and its label?

    How to hide extra overflow part of this angled css ribbon?

    How to use global stylesheet with css loader

    How to use #resource in CSS?

    CSS HTML : stumped on how to center this piece of text

    how to make css :after / :before content clickable on a label element [duplicate]

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How do I customize