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

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

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>Hello</div>
<div>World</div>
<div>!</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>Hello</div>
<div>World</div>
<div>!</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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

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