|
Child Selectors
HTMLElements can selected based on their position to their repective parents.
:first-child
Fetch HTML elements which are the first child to their respective parents.
Example
This example selects the first anchor child of parent div.
JS
HTML
// get first anchor child
$.get("div a:first-child");
:last-child
Similar to ":first-child" but it fetches HTML elements which are the last child to their respective parents.
Example
This example selects the last(3rd) anchor child of parent div.
JS
HTML
// get last anchor child
$.get("div a:last-child");
:nth-child( number )
This selector is used to fetch a specific child based on it's index (position) from it's parent.
Example
This example selects the second anchor child which is given as input to :nth-child().
JS
HTML
// Fetch second anchor child tag
$.get("div a:nth-child(2)");
parent > child
This selector is used to fetch elements which are only direct children of a parent element.
Example
This example selects the 1st anchor tag which is the only direct child of parent div.
JS
HTML
// Fetch direct anchor child tag
$.get("div > a");
| |
|
|