Ієрархічні селектори - селектори за допомогою яких вибираються елементи, що знаходяться всередені батьківського елементу на різних рівнях вкладенності або на якомусь певному рівні.

Приклади

Для конструкції, що має кілька рівнів вкладених елементів, виберемо всі елементи на всіх рівнях, що мають спільний ідентифікатор - це тег div

 $('#b3').click(function (){
 /* обираємо в батьківському блоці #i3 всі блоки div на всіх рівнях*/
 	     $('#i3 div').css("border","3px solid red");
 });

Для багаторівневої конструкції виберемо тільки елементи першого рівня, а елементи з такими ж ідентифікаторами, але на нижчих рівнях не будуть вибраними - внутрішні сині блоки не отримають червоний border.

 $('#bn3').click(function (){
 /* обираємо в батьківському блоці #i3  блоки div на першому рівні*/
 	   $('#n3>div').css("border","3px solid red");});

Вибір для обраного елемента першого наступного сестринського елемента (сестринський елемент - елемент того ж рівня).

 

          

                
1
                
2
          
          
           

                 
3
                 
4
                 
5
           

Отримають червоний бордер блоки 2, 4, 5. Для всіх синіх блоків з класом .dc2 запишемо перший сестринський елемент 1→2, для 2 немає, 3→4, 4→5.

 $('#bp3').click(function (){
 	    $('.dc2+div').css("border","3px solid red");
});

Вибір для обраного елемента всіх наступних сестринських елементів (сестринський елемент - елемент того ж рівня).

 

          

                
1
                
2
          
          
           

                 
3
                 
4
                 
5
           

Отримають червоний бордер блоки 2, 4, 5 та другий жовтий блок. Для всіх блоків, що входят в блок #k3 вибираються всі наступні сестринські елементи. Не вибраними є перші блоки бо вони ні для яких єлементів не є наступними.

  $('#bk3').click(function (){
 	     $('#k3 div~div').css("border","3px solid red"); 
});