13. '~'
1 | $('div ~ p').css('background-color', 'yellow'); | cs |
전자 조전이 시작 하는 데부터 후자 조건까지의 모든 해당 요소를 반환.(형제레벨)
ex) div 이후에 위치하고, 형제관계에 있는 모든 p 요소 선택
14. 공백
1 | $('div p').css('background-color', 'yellow'); | cs |
상위 요소 내에 포함된 하위 요소들을 선택.
ex) div내에 위치한 모든 p 요소 선택
15. '+'
1 | $('div + p').css('background-color', 'yellow'); | cs |
기준 요소 바로 다음에 위치한 요소들을 선택.
ex) div 바로 다음에 위치한 p 태그 선택
16. '>'
1 | $('div>span').css('background-color', 'yellow'); | cs |
부모와 자식 관계에 있는 요소들을 선택
ex) div의 자식관계에 있는 모든 span 요소를 선택
공백 vs '>' 의 차이점
공백은 모든 후손을 말한다. 즉 div 하위에 있는 모든 p 요소를 뜻하고
'>'는 직계자손을 뜻하는데, 즉 부모자식간의 관계만 가능하고, 손자관계는 불가능하다.
