Best IT Recipes

CSS selectors,> versus space

What is the point of using this syntax

div.card > div.name

What is the difference between this

 div.card div.name
+81
css css-selectors parent-child
Apr 14 '10 at 9:51 on
source share
3 answers

A > B will select only B, which are direct children of A (i.e., there are no other elements between them).

AB will select any B that are inside A, even if there are other elements between them.

+125
Apr 14 '10 at 9:55
source share

> is a child selector. It indicates only immediate children, and not a descendant (including grandchildren, great-grandchildren, etc.).), As in the second example without > .

The child selector is not supported by IE 6 and below. Great compatibility table here .

+6
Apr 14 2018-10-14T00:
source share

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 ensures that the selected item on the right side of > is a child of the item on the left side.

The syntax without > matches any <div class='name'> that is a descendant (and not just a child) of <div class='card'> .

0
Apr 14 2018-10-14T00:
source share


More articles:


All Articles