What’s the difference between css selectors?

Question

I have mostly put a space as I was selecting elements
Ex header h1 { styles }
But recently seen it done this way
Header > h1 { style }
What’s the difference and what’s the more professional way to select elements more specifically
Thanks for your help!

Answer 1

And for the other question,
Assume we have an html file with these content.
...
<h1>Main heading</h1>
<h1> Another</h1>
<header>
<h1>Header heading</h1>
<h1> bla</h1>
<div><h1>This wont work</h1></div>
</header>
...
And we are going to style the h1
h1 {
color : red; /*Now all h1 are red*/
}
header > h1 {
color: blue /*now all h1 inside headers(directly) are blue. Note we are referring to elements which are directly under header. So h1 inside div will still remain red.*/
}
Play with these content in the code playground so you can have a better understanding.

Answer 2

Space separated selectors are some sort of trick done to an element in relative to the behaviour of another element.
Let me make it clear.
Assume we have a btn with id b1.
And a paragraph called p1.
We need to change the color of the paragraph when hovering b1.
Fir that we could use that space separated case.
b1:hover p1 {
color: red;
}

Answer 3

👏

Answer 4

Header > h1 means the h1 children under a parent header. Which means all the h1 s inside headers.
And dont use spaces to separate elements. It means a completely different thing. Just use , instead.
Both of these are used for different purposes so all are professional according to me

Answer 5

can you explain how the space is different? I understand the comma but been using the space to select the children of the element and its been working for me that way.
so if i did header h1 { color: red } would only make h1 in all the header tags to go red and not the rest. from my understanding thats what header > h1 does as well

Answer 6

okay thank you! I think I got it now. so in your example if i did header h1 {
color: red;
}
it would select the h1 inside the div as well correct?

Answer 7

The second selector is for direct child.
<header>
<h1> Header &gt; h1 style </h1>
<div>
<h1> Header h1 style </h1>
</div>

Answer 8

With space all descendants are selected.
With > only direct childs

Answer 9

👍