What is the difference direct descendent (>) vs. d

Question

What's the difference between these two jQuery statements? They seem to do the same thing by getting all the children div tags.

$("#mainblock div")

$("#mainblock > div")

Answer 1

$("#mainblock > div") = the childs only level

$("#mainblock div") = all the childs+ desendents.

Answer 2

$("#mainblock div")

Matches any div element that is a descendant of #mainblock.

$("#mainblock > div")

Matches any div element that is a child of #mainblock .

check http://www.w3.org/TR/CSS2/selector.html

Answer 3

The first one will get all divs descendant of #mainblock. The second one will get all divs that are immediate children of #mainblock

Answer 4

$("#mainblock div")

This one target all DIVs inside "#mainblock" not matter it's direct child of "#mainblock", or child of child of main block or so on.

$("#mainblock > div")

This will target only direct child DIVs of "#mainblock" and ignore other DIVs. This one is faster then above in case you have only direct childs. Because it's not try to find inside other elements of childs.

Answer 5

Have a look at jQuery Selectors

Child Selector ("parent > child") - Hierarchy Selects all direct child elements specified by "child" of elements specified by "parent".

Descendant Selector ("ancestor descendant")- Hierarchy Selects all elements that are descendants of a given ancestor.

Answer 6

The first one will select any div that is a child of `#mainblock' at any level. The second will select any div that is an immediate child.

See this link for more info on the CSS > selector which behaves the same as in jQuery.