Css – What’s the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

css

Would you please explain me the difference between these two CSS classes syntax:

.element .symbol {}

and

.element.large .symbol {}

I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?

Best Solution

.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.