CSS에서 자식 결합자(child combinator)는 부모 요소의 직계 자식 요소만을 선택할 때 사용됩니다. 반면 후손 결합자(descendant combinator)는 부모 요소 아래에 있는 모든 하위 요소, 즉 자식뿐만 아니라 손자·손녀 수준의 깊은 요소까지 모두 선택합니다.
두 선택자의 차이를 정확히 이해하면 불필요한 클래스나 ID 없이도 원하는 요소를 정밀하게 스타일링할 수 있습니다.
1. CSS 자식 결합자(>)
자식 결합자는 부등호(>) 기호를 사용하며, 지정한 부모 요소 바로 아래 단계에 있는 자식 요소들만 선택합니다.
Selector > Selector {
속성: /*값*/;
}2. CSS 후손 결합자(공백)
후손 결합자는 두 선택자 사이에 공백을 넣어 표현하며, 해당 요소 내부에 존재하는 모든 하위 요소를 대상으로 합니다.
Selector Selector {
속성: /*값*/;
}예제 1: article의 직계 자식 선택하기
아래 예제는 article > * 선택자를 사용해 article 요소의 직계 자식 요소들에만 스타일을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
article > * {
text-align: center;
border: 10px groove tomato;
}
::first-line {
box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum.</h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img src="https://images.unsplash.com/photo-1612840666989-a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" />
</article>
</body>
</html>실행 결과
article 안의 h2, p, img 요소가 모두 직계 자식이므로, 각 요소에 토마토색 그루브(groove) 테두리가 적용되고 텍스트가 가운데 정렬됩니다. 또한 ::first-line 의사 요소 덕분에 각 블록의 첫 번째 줄에는 옥수수꽃(cornflowerblue) 색상의 내부 그림자 효과가 나타납니다.
예제 2: 자식 결합자와 후손 결합자 비교
다음 예제는 두 결합자가 실제로 어떻게 다르게 동작하는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body > * {
margin: 20px;
}
article p {
font-size: 24px;
box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);
}
</style>
</head>
<body>
<article>
<p>Neque porro quisquam</p>
<p>est qui dolorem ipsum quia dolor sit amet,</p>
<div><p>consectetur, adipisci velit.....</p></div>
</article>
<div>
<p>consectetur, adipisci velit</p>
<article>
<p>consectetur, adipisci velit</p>
</article>
</div>
</body>
</html>실행 결과
body > * 선택자는 body의 직계 자식인 article과 첫 번째 div에만 20px 마진을 적용합니다. 한편 article p는 후손 결합자이므로, article 내부 어디에 있든 모든 p 요소에 24px 글자 크기와 파란색 그림자가 적용됩니다. 이처럼 div로 감싸진 깊은 위치의 p까지 함께 스타일링되는 점이 자식 결합자와의 핵심적인 차이입니다.
정리
- 자식 결합자(
A > B): A의 바로 아래 단계 자식 B만 선택 - 후손 결합자(
A B): A 내부의 모든 하위 요소 B 선택
선택 범위를 좁혀 성능과 유지보수성을 높이고 싶다면 자식 결합자를, 특정 컨테이너 안의 모든 요소를 일괄 처리하고 싶다면 후손 결합자를 사용하는 것이 좋습니다.