Class names concatenated or separated by a space

Question

When do you separate style classes with a space? So for example: what is the difference between the following two blocks of css?

Block 1:

div {     color: brown; }  div.special {     font-size: 18px; } 

Block 2:

div {     color: brown; }  div .special {     font-size: 18px; } 

This is the HTML:

<div class="special">The quick brown fox jumps over the lazy dog.</div> 

I tried both versions. Only with block 1 the text wil be in font size 18.

Answer 1

You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes.

For example, to refer to a div with two classes, e.g. <div class="foo bar"> you could use:

div.foo.bar {...} 

To refer to the child span element <div class="foo"><span class="bar">stuff</span></div> you could use:

div.foo .bar {...}