Hi,
What's the point using this syntax
div.card > div.name
What's the difference between this
div.card div.name
Thank you!
A:
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'>.
René Nyffenegger
2010-04-14 09:54:28
Yeah, answers that take more than 15 minutes to come are not worth considering ;-)
Álvaro G. Vicario
2010-04-14 09:57:05
+1
A:
> is the descendant selector. It specifies only immediate child elements and not any descendant (including grandchildren, grand-grandchildren etc.) as in the second example without the >.
The descendant selector is not supported by IE 6 and lower. A great compatibility table is here.
Pekka
2010-04-14 09:54:29
+7
A:
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.
Matti Virkkunen
2010-04-14 09:55:01