CSS3 - 후손 선택자와 자손 선택자

후손 선택자와 자손 선택자는 특정 태그의 자손과 후손을 선택할 때 사용됩니다. 후손과 자손은 아래의 예시1을 보게되면 쉽게 이해를 할 수 있습니다.

예시1

후손 선택자

후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용합니다.

선택자 형태	설명
선택자A 선택자B	선택자A의 후손에 위치하는 선택자B를 선택합니다.

예시2

위의 예시2와 같이 #header(id="header") 태그 아래에 위치한 h1 태그에는 빨간색이 적용되고 #section(id="section") 태그 아래에 위치한 h1 태그는 주황색이 적용됩니다.

 

후손 선택자를 사용할 때 주의사항은 아래 예시3과 같이 #header(id="header") 태그의 후손에 위치하는 h1 태그와 #header(id="header") 태그의 후손에 위치하는 h2 태그를 선택하고 싶다면 앞에도 id를 적도 뒤에 오는 h2 태그 앞에도 id를 적어야 합니다.

예시3

자손 선택자

자손 선택자는 특정 태그 아래에 있는 자손을 선택할 때 사용하는 선택자입니다.

선택자 형태	설명
선택자A > 선택자B	선택자A의 자손에 위치하는 선택자B를 선택합니다.

예시4

위의 예시4로 후손 선택자의 body 태그와 구상이 같지만 #nav(id="nav") 태그 아래에 있는 h1 태그 후손이기 때문에 스타일이 적용되지 않습니다.

예시5

table 태그에 요소를 선택할 때는 자손 선택자를 사용하는 것이 좋지 않습니다. 아래의 코드를 입력하면 위에 결과처럼 th 태그에 빨간색이 적용이 되지 않습니다. 직접 실행한 곳에서 요소를 검사를 해보면 아래 예시6과 같은 결과가 나옵니다.

예시6

table 태그에 tbody 태그가 자동으로 추가가 되기 때문에 table 태그에서 자손 선택자가 잘 적용이 되지 않습니다. 따라서 적용을 하기 위해서는 table > tbody > tr > th 선택자를 사용해야 색상을 적용할 수 있습니다. 아래 예시7에서 확인할 수 있습니다.

예시7