39. Ієрархічні селектори

> - вибір вкладеного елемента першого рівня
/пробіл/ - вибір вкладених елементів на всіх рівнях
+ - вибір наступного сестринського (одного рівня) елемента
~ - вибір всіх наступних сестринських (одного рівня) елементів

Приклади

> - вибір вкладеного елемента першого рівня

.dd >

 let elem1 = document.querySelector('.dd>div');
 elem1.style.background = 'red';

/пробіл/ - вибір вкладених елементів на всіх рівнях

.ss

0 - red
1 - yellow
2 - orange
3 - pink

 let elem2=document.querySelectorAll('.ss div');
 elem2[0].style.border="3px solid red";
 elem2[1].style.border="3px solid yellow";
 elem2[2].style.border="3px solid orange";
 elem2[3].style.border="3px solid pink";

+ - вибір наступного сестринського (одного рівня) елемента

.df +

let elem3 = document.querySelector('.df + div');
 elem3.style.background = 'red';

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

.dfr ~

let elem4 = document.querySelectorAll('.dfr ~ div');
 
 elem4[0].style.background = 'red';
 elem4[1].style.background = 'black';

далі ✏