CSS의 하위 선택자(descendant selector)를 사용하면 다른 요소 내부에 포함된 모든 요소를 한 번에 선택할 수 있습니다. 예를 들어 div p처럼 작성하면, 어디에 있든 <div> 요소 안에 있는 모든 <p> 요소가 스타일 적용 대상이 됩니다.
기본 문법
선택자1 선택자2 {
/* 스타일 속성 */
}두 선택자 사이를 공백으로 구분하며, 오른쪽 선택자(자손 요소)에 스타일이 적용됩니다.
예제 코드
다음 코드를 실행하면 하위 선택자가 실제로 어떻게 동작하는지 직접 확인해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<p>Fruits are good for health.</p>
<div>
<p>This is demo text.</p>
</div>
</body>
</html>실행 결과 설명
div p 선택자 덕분에 <div> 태그 내부에 있는 "This is demo text." 문단에는 파란색 배경과 흰색 글자가 적용됩니다. 반면 <div> 바깥에 있는 "Fruits are good for health." 문단은 해당 선택자의 영향을 받지 않으므로 기본 스타일 그대로 표시됩니다.
이처럼 하위 선택자를 활용하면 특정 컨테이너 안의 요소만 골라서 스타일링할 수 있어, 페이지 전체 구조를 해치지 않으면서 원하는 영역만 정교하게 꾸밀 수 있습니다.