ancestor descendant

To find all descendant elements specified by "descendant" of elements specified by "ancestor". This includes all the child and grandchild elements. The following example finds all input elements present inside the element forms.  Any element outside the forms will not be matched.

                   $("form input")

Suppose there is a text box inside a DIV which is inside the forms. Then the DIV as well as the text box will be matched.

parent -> child

To find all child elements specified by "child" of elements specified by "parent". This will find only the immediate child elements not the grand child elements. The following code finds all the DIV inside form element. If there is a text box inside a DIV then that will not be matched. This is the difference between ancestor descendant and parent -> child Selectors.

                   $("form > div")

prev + next

This will find all next elements specified by "next" that are next to elements specified by "prev". Consider the following example :

                   $("label + input").css("color", "red").val("Hello!").

This will find all the input elements which are just next to any label element, apply the css properties and set the text to “Hello!”. If there are other input elements but not next to a label then those will not be selected.

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector. Example :

                        $("#lblName ~ div")

This code finds only all the DIV elements that are siblings after the element #lblName. If there are any other elements which are siblings after the #lblName then those will not be selected.