csscss-selectors

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

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

Solution

  • 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 {}

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