In CSS, is ".class1.class2" legal and common usage?

I am quite used to seeing

div.class1

and

#someId.class1

but what about

.class1.class2

? And I think it is identical t开发者_JS百科o

.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

It will select items with both classes. So not items with either one.

<span class="class1 class2"></span>

Yes, it is both legal and common. In the element, you would have something like this:

<div class="class1 class2">Hello</div>

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">&nbsp;</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">&nbsp;</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">&nbsp;</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:

W3C CSS SYNTAX PAGE

Just wanted to confirm the answer given by Jouke van der Maas, which is the right answer. I would like to quote the following excerpt from the CSS 2.1 specification:

5.2 Selector syntax

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. [snip]

Since the .classname selector is equivalent to the [class="classname"] selector, it is an attribute selector. Note the "in any order" bit. Hence the selector

.class1.class2

is identical to the selector

.class1.class2

and matches both elements like

<span class="class1 class2">Hello World</span>

as well as

<span class="class2 class1">Hello World</span>

which is the same thing, as well as

<span class="class1 class2 class3">Hello World</span>

etc...

You can also get even more fancy.