[css] What's the difference btw CSS classes ".foo.bar"(no space) and ".foo .bar"(with space) and ".foo, .bar"(comma)?

source: http://stackoverflow.com/questions/10036156/whats-the-difference-between-css-classes-foo-bar-without-space-and-foo-bar

question:
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space) [duplicate]

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML object with the class .symbol that is inside a object with the class .element.

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

In this example your first CSS entry would effect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that its equal to the first one.

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

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}