HTML 문서의 태그는 트리(계층) 구조로 이루어져 있다. 즉, 부모, 형제, 자식, 후손 태그가 있다.
부모 태그의 후손 태그는 자식 태그와 손자 태그 모두 해당한다.
부모 태그의 자식 태그는 자식 태그만 해당된다.
후손 요소는 후손 선택자(스페이스 바)를 이용하여 선택한다.
자식 요소는 자식 선택자(>)를 이용하여 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식, 후손선택자</title>
<style>
/*메인 메뉴를 선택자로 선택할 때는 자식 선택자를 사용하여 자식 요소만 선택한다.*/
ul li a {color:red;} /*공통 스타일 시트*/
ul.main-menu > li > a {color:brown;} /*개별 스타일시트*/
/*후손 선택자로 모든 메뉴를 red로 변경한 후 메인 메뉴만 개별적으로 선택하여 brown으로 적용한다.*/
</style>
</head>
<body>
<nav>
<ul class="main-menu">
<li><!-- 메인 메뉴 -->
<a href="#">menu01</a>
<ul class="sub-menu">
<li><a href="#">sub-menu01</a></li>
<!-- 서브 메뉴 -->
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu02</a></li>
<li>
<a href="#">menu03</a>
<ul class="sub-menu">
<li><a href="#">sub-menu01</a></li>
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
</ul>
</nav>
</body>
</html>
결과
