[css] Target elements with multiple classes, within one rule

I have some HTML that would have elements with multiple classes, and I need to assign them within one rule, so that the same classes could be different within different containers. Say I have this in my CSS:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Then I have this in my HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Can I target these within a single rule? Like this, for example, which I know doesn't work:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

This question is related to css class target

The answer is


Just in case someone stumbles upon this like I did and doesn't realise, the two variations above are for different use cases.

The following:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

is for when you want to add styles to elements that have either the blue-border or background class, for example:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

would all get a blue border and white background applied to them.

However, the accepted answer is different.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

This applies the styles to elements that have both classes so in this example only the <div> with both classes should get the styles applied (in browsers that interpret the CSS properly):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

So basically think of it like this, comma separating applies to elements with one class OR another class and dot separating applies to elements with one class AND another class.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to class

String method cannot be found in a main class method Class constructor type in typescript? ReactJS - Call One Component Method From Another Component How do I declare a model class in my Angular 2 component using TypeScript? When to use Interface and Model in TypeScript / Angular Swift Error: Editor placeholder in source file Declaring static constants in ES6 classes? Creating a static class with no instances In R, dealing with Error: ggplot2 doesn't know how to deal with data of class numeric Static vs class functions/variables in Swift classes?

Examples related to target

failed to find target with hash string 'android-22' How to set child process' environment variable in Makefile Input button target="_blank" isn't causing the link to load in a new window/tab If conditions in a Makefile, inside a target The project was not built since its build path is incomplete jQuery: go to URL with target="_blank" Target elements with multiple classes, within one rule What does this symbol mean in IntelliJ? (red circle on bottom-left corner of file name, with 'J' in it) Can I create links with 'target="_blank"' in Markdown? How to change target build on Android project?