CSS에서 자식 선택자(child selector)는 특정 요소의 직계 자식에 해당하는 모든 요소를 선택하고 싶을 때 사용합니다. 자식 선택자는 부모 선택자와 자식 선택자 사이에 > 기호를 넣어 표현하며, 기본 형태는 다음과 같습니다.
div > p
위 선택자는 div 요소의 바로 아래 단계에 있는 p 요소만 선택합니다. 중요한 점은 손자 요소처럼 더 깊은 단계에 있는 후손은 선택되지 않는다는 것입니다. 이 점이 하위 요소 전체를 선택하는 '후손 선택자(div p)'와의 가장 큰 차이입니다.
예제
다음 코드를 실행하면 CSS 자식 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>div 안의 첫 번째 문단.</p>
<!-- 이 문단은 div의 직계 자식이 아니므로 선택되지 않음 -->
<span><p>div 안의 두 번째 문단.</p></span>
</div>
<p>div 밖의 세 번째 문단.</p>
</body>
</html>실행 결과
위 예제를 브라우저에서 실행하면 다음과 같은 결과를 볼 수 있습니다.
결과 분석
- 첫 번째 문단:
div의 직계 자식이므로 주황색 배경이 적용됩니다. - 두 번째 문단:
span태그로 감싸져 있어div의 직계 자식이 아닌 손자 요소이기 때문에 스타일이 적용되지 않습니다. - 세 번째 문단:
div외부에 있으므로 역시 선택되지 않습니다.
이처럼 자식 선택자를 활용하면 원하는 계층 구조의 요소만 정확하게 대상으로 삼을 수 있어, 불필요한 스타일 적용을 막고 CSS 코드를 더 깔끔하게 유지할 수 있습니다.