What is the difference between '>' and a space in CSS selectors?
CssCss SelectorsCss Problem Overview
What's the point using this syntax
div.card > div.name
What's the difference between this
div.card div.name
Css Solutions
Solution 1 - Css
A > B will only select B that are direct children to A (that is, there are no other elements inbetween).
A B will select any B that are inside A, even if there are other elements between them.
Solution 2 - Css
> is the child selector. It specifies only immediate child elements and not any descendant (including grandchildren, grand-grandchildren etc.) as in the second example without the >.
The child selector is not supported by IE 6 and lower. A great compatibility table is here.
Solution 3 - Css
> vs. Space
Consider the two scenarios div > span { } vs. div span { }
Here, the (space) selects all the all the <span> elements inside <div> element even if they are nested inside more than one element. The > selects all the children of <div> element but if they are not inside another element.
Take a look at two examples:
> (Greater than):
div > span {
color: #FFBA00 ;
}
<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>
<span>World!</span>
</div>
</body>
This one just selects the <span>Hello...</span> (because it's immediately after the nested div tag), and <span>World!</span> and it won't look for the <span> inside <p> tag because it's not immediately after a div tag.
Space
div span {
color: #0A0 ;
}
<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>
<span>World!</span>
</div>
</body>
This one selects all the span tags, even if they are nested inside other tags.
Solution 4 - Css
div.card > div.name matches <div class='card'>....<div class='name'>xxx</div>...</div>
but it doesn't match <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
div.card div.name matches both.
That is, the > selector makes sure that the selected element on the right side
of the > is an immidiate child of the element on its left side.
The syntax without the > matches any <div class='name'> that is a descendant (not only a child) of <div class='card'>.
Solution 5 - Css
A > B selects B if it's a direct children of A, whereas A B selects B whether it is a direct children of B or not.
<p> USING SPACE </p>
<style>
.a .b {
background-color: red;
}
</style>
<span class="a">
a
<br>
<span class="b"> a b</span>
<br>
<span class="c">
<span class="b"> a b c</span>
</span>
</span>
<br><br>
<p> USING GREATER THAN SIGN</p>
<style>
.x > .y {
background-color: red;
}
</style>
<span class="x">
x
<br>
<span class="y"> x y</span>
<br>
<span class="z">
<span class="y"> x y z</span>
</span>
</span>