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

.element .symbol

means .symbol inside .element

.element.symbol

means .element that has the class symbol as well.

So,

.element.large .symbol

means .symbol inside .element that has the class large as well.

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

.element .symbol {}

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

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

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

Your second example means that the first class requires two classes to be affected. Other than that it's 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 {}

Edit: By request the link to the documentation of the CSS selectors.

Using

.element.large

refers to an element with both classes:

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

rather than a descendant of an element:

.element .large

meaning that in:

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

only

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

is 'receiving' the styles.

Basically, being separated by a space implies two elements with a descendant relationship.

You would use .element .symbol this where you have an element inside of another element. For example:

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

If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:

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