- Hierarchy Selectors are used to finding out an element from a selected element based on ancestor and descendants.
- It's very helpful when finding an element that rotates between the relationship.
Parent to Child
This selector helps to find out which parent element contains a reference of the particular child element.
$(document).ready(function () {
$('button').click(function () {
$('div>p').show());
});
});
In this example show which div parent holds p element that element only shows when the button has to be clicked.
Ancestors and decentands
This selection helps to find out the element which has grandparent, parent, and child relationship.$(document).ready(function () {
$('button').click(function () {
$('div>p>span>b').show());
});
});
- Here, div is an ancestor,p is a grandparent, span is parent, and b is a child.
- In this selection get the accurate element that is to be nested.
Based on previous and next element
- In this selector helps to find out the element based on the previous and next structures.
- Here, we can see the selection based on siblings and next
$(document).ready(function () {
$('button').click(function () {
$('div+p).show());
});
});
- It selects which div have the next p. It selects only next not somewhat element.
Illustration
$(document).ready(function () {
$('button').click(function () {
$('div~p).show());
});
});
- It helps to find out the siblings.
- This means if a div element has anyone p element it will be preferred. Other elements are not to make an issue.
Comments