CSS의 하위 선택자(descendant selector)는 특정 요소의 모든 자손(하위) 요소를 선택할 때 사용하는 선택자입니다. 부모 요소와 자손 요소 사이에 공백을 두고 작성하며, 직계 자식뿐만 아니라 그 아래 깊이 있는 모든 후손 요소까지 매칭한다는 점이 특징입니다.
하위 선택자의 기본 문법
부모요소 자손요소 {
/* 스타일 속성 */
}예를 들어 div p라고 작성하면, <div> 태그 내부에 존재하는 모든 <p> 요소가 선택됩니다. div 바로 아래에 있든, 중간에 다른 태그를 한 단계 더 거쳐 있든 상관없이 적용됩니다.
예제 코드
아래 코드를 실행하면 CSS 하위 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>div 안의 첫 번째 문단</p>
<p>div 안의 두 번째 문단</p>
</div>
<p>div 밖의 세 번째 문단.</p>
</body>
</html>실행 결과
결과 해설
div p { background-color: orange; } 스타일 규칙 때문에 <div> 요소 내부에 있는 두 개의 문단은 주황색 배경으로 표시됩니다. 반면, div 외부에 작성된 세 번째 문단은 하위 선택자의 대상이 아니므로 배경색이 적용되지 않습니다.
하위 선택자와 자식 선택자의 차이점
하위 선택자와 혼동하기 쉬운 개념으로 자식 선택자(child selector)가 있습니다. 자식 선택자는 div > p처럼 > 기호를 사용하며, 오직 직계 자식만 선택합니다. 반면 하위 선택자(div p)는 몇 단계를 거치더라도 div 안에 있다면 모두 선택합니다. 이 차이를 이해하면 더욱 정교한 스타일링이 가능합니다.