What is the difference between CSS classes .foo.bar (without spaces) and .foo.bar (with spaces)

Question

Possible duplicate:
Difference between .classA.classB and .classA.classB in CSS?

Could you explain to me the difference between these two CSS class syntaxes:

.element .symbol {} 

and

 .element.large .symbol {} 

I do not understand the difference between the two. The first line indicates two different classes to which the same styles apply. But about the second, what does "big" mean, which is written on the ".element"?

Answer 1

I think you have a slight misunderstanding of what the first means.

 .element .symbol {} 

Indicates that these CSS settings apply to any HTML element with the .symbol class that is inside the element with the .element class.

 <div class="element"> <div class="symbol" /> </div> 

In this example, your first CSS entry will affect the <div> in the middle.

The second example means that the first class requires two classes. In addition, it is equal to the first.

 <div class="element large"> <div class="symbol" /> </div> 

So, if the HTML looks like this, the CSS values ​​will be applied to the internal <div> .

If you want to set CSS tags that apply to several classes separately, you need to separate them with a comma. So it looks like this:

 .element, .symbol {} 

Edit: upon request, a link to the documentation for CSS selectors.

Answer 2

 .element .symbol 

means .symbol inside .element

 .element.symbol 

means .element , which also has a symbol class.

So,

 .element.large .symbol 

means .symbol inside .element , which also has a large class.

Answer 3

Using

 .element.large 

applies to an element with both classes :

 <div class="element large"></div> 

not a child of the element:

 .element .large 

which means:

 <div class="element"> <div class="large"></div> </div> 

only

 <div class="large"></div> 

"gets" styles.

Basically , separated by a space, it implies two elements with a descendant relation.

Answer 4

You would use .element .symbol here, where you have an element inside another element. For example:

 <div class="element"> <i class="symbol"></i> </div> 

If you wanted to differentiate some divs along the way, you can add an extra class to target only those that are different and configure it with .element.large .symbol . So for example:

 <div class="element large"> <i class="symbol"></i> </div> 

Answer 5

In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element"> .

In general, each part of the selector applies to a single HTML element.

table[border].clname means a table with the border attribute and the clname class, and table [border] .clname means the element with the clname class in the element with the border attribute in the table.

(Edit: ok, I say "one HTML element", but of course you can have more than one table to which this refers. You understand.)