145

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

2 Answers 2

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

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

  • .border-blue .background { ... } is for where '.background' is the child of '.border-blue'.

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

4
  • 2
    Thanks! I didn't know if this was possible, so I was asking here to find out. Mar 4, 2011 at 16:41
  • This solution doesn't work for me (or doesn't work anymore...).
    – fresko
    Oct 18, 2016 at 10:28
  • you need to separate by commas the classes, as the Chris's answer tells
    – fresko
    Oct 18, 2016 at 10:38
  • what do you mean in .border-blue .background { ... } is child? i tried this and this does not work Apr 16, 2020 at 20:26
194

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.

3
  • 13
    This was a very helpful answer that I almost didn't read. Cheers!
    – psicopoo
    Dec 7, 2012 at 14:34
  • 3
    Just be careful. There are no spaces in .blue-border.background
    – Knu8
    Dec 20, 2016 at 13:19
  • 3
    think of it as AND and OR : Great advice. I might add that .x .y can be thought of as y && ancestors.has(x) Sep 15, 2017 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.