What is correct syntax for chaining selectors and specificity in CSS

In the Learn CSS Syntax and Selectors course it says that to chain selectors then you write it the code like this:
h1.special {
}
So in the example above there is no space between the two selectors.

Then in the same lesson it gives an example of how to write to increase the specificity of the selector and the example below is given:
.main p {
color: red;
}
In the example above there is a space between the two selectors.
Why when the class is written first followed by a type selector, is there a space between the selectors, but when the class is written second after the type selector, there is no space between selectors?

I wrote the following code in the CSS editor to test how this works:
h4.test {
color: black;
}
the above code works fine. Then I added a space as follows:
h4 .test {
color: black;
}
Now with the space the code doesn’t work. There is a tutorial on youtube explaining how to chain selectors and he writes the type selector first followed by class but has a space between the selectors yet his code works. So why when I write a space above in my last example above does it not work with a space between selectors? The youtube video link is as follows (go to 4:39) https://www.youtube.com/watch?v=6VGKD7p4p-w&t=451s

With the space you target the nested element. It is a different selector than the one without a space.

CSS

h4.test {
  color: black;
}

Works for:

<h4 class="test">Test</h4>

CSS

h4 .test {
  color: black;
}

Works for:

<h4>
  <span class="test">Test</span>
</h4>
1 Like

thanks for clarifying.

1 Like