When to put a space between a tag name and a class or identifier

Question

When should I use this:

header.classname

and when should I use this:

header .classname

And what is the difference between the two?

Answer 1

header.classnamemeans you are targeting a heading having a class like classname.

header .classnamemeans you are targeting an html element with a class classnamethat is a descendant / descendant of the header

1st case:

header.hclassname {
  background: turquoise;
}

<header class="hclassname">
  Lorem Ipsum
  <div class="divclassname">Dolor</div>
  Sit Amet
</header>

Run codeHide result

Second case

header .divclassname {
  background: skyblue;
}

<header class="hclassname">
  Lorem Ipsum
  <div class="divclassname">Dolor</div>
  Sit Amet
</header>

Run codeHide result

Answer 2

Use header.classnamewhen: you want to target on .classnamewhich is the item header.

Use header .classnamewhen: you want to target the .classnamedescendants of an element header.

, , , .