How to target separated class names through css?

I have such class in html:

<div class="balloon b1" style="background-image: url(balloon1.png);"></div>

As you can see class name is separated it is for the purpose of javascript to target different obj开发者_开发百科ects, but lets say I do not want to add styles through html, so I left <div class="balloon b1"></div> in html and targeted through css:

.balloon b1 {
}

and of course it doesn't target like this. Any ideas how to target this kind of stuff?

<div class="balloon b1"></div> : the class name is not separated. This div has two classes (.balloon and .b1)

I recommend defining both classes in your CSS:

.balloon {

}

.b1 {

}

Anything in .b1 will override anything defined in .balloon. It's easily scalable and more adoptable by other nodes in your application.

Try:

.balloon.b1 {
}

This will match all elements that carry both classes.

In CSS, the . is used to indicate a class, and a # is used to indicate an id. Likewise, you can couple classes, which is what you are looking for as shown:

.balloon.b1 
{ 
    //CSS GOES HERE 
}

However if you were to extrapolate this to multiple different items, you may be better off separating your balloon class and individual ones, such as:

//Balloon
.balloon{ width: 100px; height: 100px;}

//Individual Styles
.b1 { background-color: red;  }
.b2 { background-color: blue; }
.b3 { background-color: yellow; }
.b4 { background-color: green; }

Working Demo

If your HTML elements has two classes, like <div class="foo bar">, you can target it with two CSS class selectors combined:

div.foo.bar { /* rules */ }

Or, if you prefer to omit the tag selector:

.foo.bar  { /* rules */ }

You have to put a dit in front of each class name:

.balloon.b1 {
}