Question

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 objects, 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?

Answer 1

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 */ }