Target elements with multiple classes, within one rule

css class target
Tanner Ottinger picture Tanner Ottinger · Mar 4, 2011 · Viewed 105.6k times · Source

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

Vian Esterhuizen picture Vian Esterhuizen · Mar 4, 2011

.border-blue.background { ... } is for one item with multiple classes.
.border-blue, .background { ... } is for multiple items each with their own class.
.border-blue .background { ... } is for one item where '.background' is the child of '.border-blue'.

See Chris' answer for a more thorough explanation.

Related questions

Using two CSS classes on one element

What am I doing wrong here? I have a .social div, but on the first one I want zero padding on the top, and on the second one I want no bottom border. I have attempted to create classes for …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Add and remove a class on click using jQuery?

Please see this fiddle. I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all …

Read More