Menu
A space in a CSS selector has very special meaning. It means that the part of the selector that occurs right of the space is within (a child of) the part of the selector to the left.
The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent.
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state)
2 Answers. Show activity on this post. + will only select the first element that is immediately preceded by the former selector. ~ selector all the sibling preceded by the former selector.
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.
> 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.
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'>.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With