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?
<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.
.balloon.b1{} and .balloon.b2{} without a space. .balloon .b1 {} will look for nodes with class="b1" nested inside a node with class="balloon"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; }
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 {
}
