I am quite used to seeing
div.class1
and
#someId.class1
but what about
.class1.class2
? And I think it is identical to
.class2.class1
? Because there was an element with id someId but now we have two elements of this type showing on the page, so I want to add a class and use the class instead of id, therefore the .class1.class2 instead of #someId.class1
Yes, it is both legal and common. In the element, you would have something like this:
<div class="class1 class2">Hello</div>
It will select items with both classes. So not items with either one.
<span class="class1 class2"></span>
It's nice for syntactic styling. To give you an example, let's say you have the following html:
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
You can add a second (and third, forth, etc.) class that modifies "box". For example:
<div class="first odd box">
</div>
<div class="second even box">
</div>
<div class="third odd box">
</div>
<div class="fourth even box">
</div>
Then, in styling, to style different box groups, you can do the following:
.odd.box {
}
.first.box, .fourth.box {
}
.first.box, .even.box {
}
This will be interpreted by the browser if you give your element does two class:
.class1.class2{width:500px;height:300px;}
<div class="class1 class2"> </div>
If you do like this, it will not be interpreted, resulting on a div with no styles:
.class1.class2{width:500px;height:300px;}
<div class="class2"> </div>
This will be interpreted (resulting on an element with a dimension of 500px X 300px:
.class1 {width:500px;}
.class2 {height:300px;}
<div class="class1 class2"> </div>
The common use of css, is to tell the browser that a certain element with and ID or CLASS of a certain name will get a set of styles, or tell the browser that a certain ID or CLASS will get a set of Styles, like so:
Ex 1:
.class1 {width:500px;} -> elements with this class will get 500px of width.
Ex 2:
div.class1 {width:500px;} -> only a div element with this class will get 500px of width.
Ex 3:
div.class1, h1.class1 {width:500px;} -> only a div and a h1 element with this class will get 500px of width.
You can read valid information about css at: