Alex Rivera | Logout

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

Asked 2012-04-05T21:18:44.093
241

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'?

css css-selectors
Edit
Report

1 Answer

48

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.

answered 2012-04-05T21:24:28.050

Your Answer