CSS 자식 선택자(child selector)는 특정 부모 요소 바로 아래에 있는 직계 자식 요소들을 모두 선택하는 데 사용되는 선택자입니다. 후손 선택자(descendant selector)와 달리 한 단계 아래의 자식 요소에만 스타일이 적용되며, 그보다 깊은 단계의 손자 요소에는 영향을 주지 않는다는 점이 핵심입니다.
구문(Syntax)
CSS 자식 선택자의 기본 구문은 다음과 같습니다.
element > element {
/* 선언부 */
}
두 요소 사이의 오른쪽 꺾쇠 기호(>)가 부모-자식 관계를 나타내며, 이 기호 앞의 요소가 부모, 뒤의 요소가 자식이 됩니다.
예제 1
다음 예제는 CSS 자식 선택자가 실제로 어떻게 동작하는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 5px;
}
article > div {
border: dashed midnightblue;
width: 45%;
}
div > p {
font-size: 20px;
font-style: italic;
box-shadow: inset 0 0 8px orange;
}
</style>
</head>
<body>
<h2>Examination Detail</h2>
<article>
<div>Exam Details</div>
<div><p>Exam begins at 11AM.</p></div>
<span><div> Do not bring cell phone.</div></span>
<div>
<div>Candidates should reach the center till 10:45.</div>
<br/>
The candidates need to be bring the Admit Card.
</div>
</article>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
이 예제에서 article > div는 article 요소의 직계 자식인 div에만 점선 테두리가 적용되며, span 태그로 감싸진 div에는 적용되지 않습니다. 마찬가지로 div > p 역시 div의 직계 자식인 p 요소에만 글꼴 크기, 이탤릭체, 내부 그림자 스타일이 적용됩니다.
예제 2
다음 예제는 중첩된 div 구조에서 자식 선택자를 활용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
width: 200px;
padding: 30px;
background-color: moccasin;
}
div > div {
box-shadow: inset 0 0 8px mediumseagreen;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
div > div 선택자 덕분에 외부 div 안에 위치한 내부 div에만 초록색 내부 그림자와 비대칭 둥근 모서리 효과가 적용된 것을 확인할 수 있습니다. 이처럼 자식 선택자를 활용하면 문서 구조에서 원하는 계층의 요소만 정확하게 스타일링할 수 있습니다.