[CSS] 자식 결합자(>)·자손 결합자(공백) 정리

 CSS 결합자는 요소 간의 관계를 기준으로 스타일 적용 대상을 선택합니다.
그중 가장 많이 쓰이고, 가장 헷갈리는 것이 자식 결합자와 자손 결합자입니다.

 

1. 자손 결합자 (공백)

.book-container .title {
    color: #12172a;
}

 

1️⃣ 의미

.book-container 안에 있는 모든 .title 요소 선택
(직계 자식이든, 손자·증손자든 상관없음)

 

2️⃣ 구조 예시

<div class="book-container">
  <div>
    <h1 class="title">제목</h1>
  </div>
</div>

✔ 선택됨
→ “안에만 있으면 된다” 가 핵심

 

2. 자식 결합자 (>)

.book-container > .title {
    color: #12172a;
}

 

1️⃣ 의미

.book-container의 바로 아래(직계 자식) .title만 선택

 

2️⃣ 구조 예시

<div class="book-container">
  <h1 class="title">제목</h1>
</div>

✔ 선택됨

<div class="book-container">
  <div>
    <h1 class="title">제목</h1>
  </div>
</div>

❌ 선택 안 됨

→ 한 단계 아래만 허용

 

 

3. 예시로 한 번에 이해하기

.book .date {
    font-weight: 700;
}

✔ .book 안에 있는 모든 .date 선택

.book > .date {
    font-weight: 700;
}

✔ .book의 직계 자식 .date만 선택

 

4. 실무에서 어떻게 쓰는 게 좋을까?

 

• 기본은 자손 결합자
• 구조를 명확히 제한하고 싶을 때만 자식 결합자

예시

/* 구조 변화에 비교적 안전 */
.card .title { }

/* 구조가 고정된 컴포넌트에서만 */
.card > .title { }

 

자식 결합자는

• 구조가 조금만 바뀌어도 스타일이 깨질 수 있음
• 컴포넌트 내부 구조가 확정적일 때 사용 권장

 

 

정리하면

 

공백은 “안에 있으면 됨”,
>는 “바로 아래여야 함”

 

자식·자손 결합자를 과도하게 사용하는 것보다,
의미가 명확한 클래스 이름을 먼저 설계하고 필요한 경우에만 결합자를 사용하는 것이 유지보수에 유리하다.