jQuery | parent > child Selector
It is a jQuery Selector used to select all elements that are the direct child of its parent element.
Syntax:
("parent > child")
Parameter Values:
- parent: Using this, the parent element will be selected.
- child: Using this, the direct child element of the specified parent element will be selected.
Return Value: It selects and returns all the direct child of the specified parent element.
Example-1:
<!DOCTYPE html> < html > < h1 >< center >Geeks </ center ></ h1 > < head > < script src = </ script > < script > $(document).ready(function() { $("div > span").css( "background-color", "green"); }); </ script > </ head > < body > < h3 >All span elements that are a direct child of < div > element are selected.</ h3 > < div style = "border:1px solid black;" > < p >Geeks for Geeks < br > < span > jQuery parent > child Selector </ span ></ p > </ div > < br > < div style = "border:1px solid black;" > < p >Geeks for Geeks</ p > < span > jQuery parent > child Selector </ span > </ div > </ body > </ html > |
Output:
Example-2:
<!DOCTYPE html> < html > < h1 >< center >Geeks </ center ></ h1 > < head > < script src = </ script > < script > $(document).ready(function() { $("div").css( "background-color", "green"); }); </ script > </ head > < body > < h3 >All div elements are selected.</ h3 > < div style = "border:1px solid black;" > < p >Geeks for Geeks</ p > < p >jQuery parent > child Selector </ p > </ div > </ body > </ html > |
Output: