CSS 하위 선택자(descendant selector)는 첫 번째 요소의 자손 중에서 두 번째 선택자와 요소 이름이 일치하는 모든 요소를 선택할 때 사용합니다. 여기서 '자손'은 바로 아래 단계인 자식뿐만 아니라, 몇 단계든 깊게 중첩된 모든 후손 요소까지 포함한다는 점이 핵심입니다.
문법
CSS 하위 선택자의 기본 문법은 다음과 같습니다.
element element {
/* 선언부 */
}첫 번째 element는 조상(ancestor) 요소를, 두 번째 element는 그 안에서 찾고자 하는 자손(descendant) 요소를 의미하며, 두 선택자 사이는 반드시 공백으로 구분해야 합니다.
예제 1: 중첩된 div 요소 스타일링
다음 예제는 하위 선택자를 활용하여 중첩된 div 요소마다 서로 다른 테두리 색상과 모서리 둥글기를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: right;
margin: 25px;
padding: 5px;
width: 80px;
height: 80px;
border: solid aqua;
}
div div {
border-color: blue;
border-radius: 50%;
}
div div div {
border-color: orange;
border-radius: unset;
}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 목록(li) 요소에 적용하기
하위 선택자는 목록 구조에서도 유용하게 활용할 수 있습니다. 아래 예제에서는 ol 내부에 중첩된 li 요소에만 배경색을 지정하여, 최상위 항목과 중첩 항목을 시각적으로 구분합니다.
<!DOCTYPE html>
<html>
<head>
<style>
li li {
background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
<li></li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
<li></li>
</ol>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
참고: 하위 선택자 vs 자식 선택자
하위 선택자(A B)가 A의 모든 후손을 대상으로 하는 것과 달리, 자식 선택자(A > B)는 A의 직계 자식만 선택합니다. 따라서 특정 깊이까지만 스타일을 적용하고 싶다면 자식 선택자를 사용하는 것이 더 적합할 수 있습니다.