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

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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>

Answer 5

In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.

In general, each part of a selector applies to one HTML element.

table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.

(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)

Answer 6

Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.

Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.

An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.

.a1 .b1 {
  color: green;
}

.a1.a2 .b1 {
  color: red;
}

.a1.a2 .b2 {
  font-style: italic;
  font-weight: bold;
}

.a1.a2 .b2 > span {
  color: orange;
}

<div class="a1">
  <div class="b1">Hello France</div>
  <div class="b1">Hello Spain</div>
  <div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
  <div class="b1">Bye France</div>
  <div class="b1">Bye Spain</div>
  <div class="b2">
    Bye
    <span>World</span>
  </div>
</div>