[CSS] 후손 선택자, 자손 선택자

후손 선택자와 자손 선택자는 특정 태그의 자손과 후선을 선택할때 사용되는 선택자입니다. 그렇다면 자손과 후손의 개념을 정확하게 알고 갈 필요가 있겠죠.

아래의 예시를 통해 후손과 자손의 개념을 알아보도록 하겠습니다

먼저 div 태그를 기준으로 설명을 드리겠습니다.

div 태그의 자손은 한단계 바로 아래에 있는 h2,ul태그를 자손태그라고 합니다

자손태그는 말그대로 특정태그의 바로 한단계 밑에 있는 태그를 자손태그라고 하죠

후손태그는 div 밑에 위치한 모든 태그를 후손 태그라 합니다

즉 div태그의 후손 태그는 h2,ul,li 모두 해당이 된다는 뜻이기도 합니다

아래의 가계도를 보면 쉽게 이해하실수 있을겁니다.

후손 선택자의 형태는

선택자A 선택자B {속성 : 값} 

이와 같은 형태로 되어져 있습니다 선택자A 라는 태그 의 후손인 선택자B 를 선택하여

style를 적용하겠다는 뜻인데요. 후손선택자를 사용하실때는 선택자A 다음에 한번 띄어주시고 선택자B 적어주셔야 하다는점도 꼭 기억해두셔야 합니다

자손 손선택자의 형태는 부등호 기호를 사용합니다

선택자A > 선택자B {속성 : 값};

자손선택자는 위와 같은 형태로 되어져 있는데여 선택자A태그의 자손인 선택자B를 선택한다라는 의미로 기억하시면 됩니다.