Question

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);
}

Answer 1

.border-blue.background { ... } is for when both classes are used together.

Targets only the first

<div class="border-blue background"></div>
<div class="border-blue"></div>
<div class="background"></div>

---

.border-blue, .background { ... } is for either class.

Targets both

<div class="border-blue"></div>
<div class="background"></div>

---

.border-blue .background { ... } is for where ‘.background’ is the child of ‘.border-blue’.

Targets only the second ‘.background’ element

<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

See Chris’ answer for a more thorough explanation. Also see W3 Docs on CSS Combinators