CSS 조합 선택자 정리하기

이 글에서 다루는 내용

CSS 기본 선택자는 태그, class, id처럼 요소 자체를 기준으로 선택합니다.

하지만 실제 HTML 구조에서는 요소들이 서로 안에 들어가 있거나, 나란히 배치되어 있는 경우가 많습니다.

이때 요소의 관계를 기준으로 선택하는 방법이 필요합니다.

이런 선택자를 조합 선택자라고 합니다.

이번 글에서는 CSS 조합 선택자 4가지를 정리합니다.

• 자식 선택자
• 하위 선택자
• 인접 형제 선택자
• 일반 형제 선택자

조합 선택자란?

조합 선택자는 여러 선택자를 조합해서 특정 관계에 있는 요소를 선택하는 방법입니다.

쉽게 말하면 “어떤 요소 안에 있는 요소”, “바로 옆에 있는 요소”, “같은 부모를 가진 요소”를 고르는 방식입니다.

예를 들어 다음 HTML을 봅니다.

<div class="box">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
</div>

여기서 p 태그는 div 안에 들어 있습니다.

CSS에서는 이런 관계를 이용해 원하는 요소만 선택할 수 있습니다.

1. 자식 선택자

자식 선택자는 특정 요소의 바로 아래에 있는 요소를 선택합니다.

기호는 >를 사용합니다.

부모 > 자식 {
  속성: 값;
}

예시입니다.

<div class="menu">
  <p>바로 아래 문장</p>
  <section>
    <p>section 안의 문장</p>
  </section>
</div>

.menu > p {
  color: red;
}

위 CSS는 .menu의 바로 아래에 있는 p 태그만 선택합니다.

그래서 바로 아래 문장만 빨간색이 됩니다.

section 안에 있는 p 태그는 바로 아래 자식이 아니라서 선택되지 않습니다.

자식 선택자 쉽게 이해하기

자식 선택자는 바로 한 단계 아래만 봅니다.

.menu
 ├─ p        ← 선택됨
 └─ section
     └─ p    ← 선택 안 됨

즉, “내 바로 밑에 있는 자식만 선택해라”라는 뜻입니다.

2. 하위 선택자

하위 선택자는 특정 요소 안에 들어 있는 모든 하위 요소를 선택합니다.

기호 없이 공백으로 구분합니다.

부모 하위요소 {
  속성: 값;
}

예시입니다.

<div class="menu">
  <p>바로 아래 문장</p>
  <section>
    <p>section 안의 문장</p>
  </section>
</div>

.menu p {
  color: blue;
}

위 CSS는 .menu 안에 있는 모든 p 태그를 선택합니다.

그래서 바로 아래 문장과 section 안의 문장이 모두 파란색이 됩니다.

하위 선택자 쉽게 이해하기

하위 선택자는 안쪽에 있는 요소를 전부 봅니다.

.menu
 ├─ p        ← 선택됨
 └─ section
     └─ p    ← 선택됨

즉, “내 안에 들어 있는 모든 p를 선택해라”라는 뜻입니다.

자식 선택자와 하위 선택자 차이

자식 선택자와 하위 선택자는 처음 배울 때 가장 헷갈리기 쉽습니다.

간단히 기억하면 됩니다.

>가 있으면 바로 아래만 선택합니다.

공백이면 안쪽 전체를 훑어봅니다.

3. 인접 형제 선택자

인접 형제 선택자는 특정 요소의 바로 다음에 오는 형제 요소 하나를 선택합니다.

기호는 +를 사용합니다.

앞요소 + 바로다음요소 {
  속성: 값;
}

형제 요소는 같은 부모 안에 나란히 있는 요소를 말합니다.

예시입니다.

<h2>공지사항</h2>
<p>첫 번째 문장</p>
<p>두 번째 문장</p>

h2 + p {
  color: red;
}

위 CSS는 h2 바로 다음에 오는 p 태그 하나만 선택합니다.

그래서 첫 번째 문장만 빨간색이 됩니다.

두 번째 문장은 바로 다음 형제가 아니기 때문에 선택되지 않습니다.

인접 형제 선택자 쉽게 이해하기

h2
p   ← 선택됨
p   ← 선택 안 됨

+는 바로 옆에 붙어 있는 다음 요소 하나만 선택합니다.

4. 일반 형제 선택자

일반 형제 선택자는 특정 요소 뒤에 나오는 형제 요소들을 선택합니다.

기호는 ~를 사용합니다.

앞요소 ~ 뒤에오는요소들 {
  속성: 값;
}

예시입니다.

<h2>공지사항</h2>
<p>첫 번째 문장</p>
<p>두 번째 문장</p>
<div>중간 박스</div>
<p>세 번째 문장</p>

h2 ~ p {
  color: blue;
}

위 CSS는 h2 뒤에 나오는 형제 p 태그들을 선택합니다.

그래서 첫 번째 문장, 두 번째 문장, 세 번째 문장이 모두 파란색이 됩니다.

단, div는 p 태그가 아니므로 선택되지 않습니다.

일반 형제 선택자 쉽게 이해하기

h2
p    ← 선택됨
p    ← 선택됨
div  ← 선택 안 됨
p    ← 선택됨

~는 바로 옆 하나만 보는 것이 아니라, 뒤에 있는 형제 요소들을 넓게 봅니다.

인접 형제와 일반 형제 차이

간단히 기억하면 됩니다.

+는 바로 다음 하나만 선택합니다.

~는 뒤에 나오는 형제들을 선택합니다.

조합 선택자 한 번에 정리하기

전체 예시

HTML 코드입니다.

<div class="card">
  <h2>카드 제목</h2>
  <p>첫 번째 설명입니다.</p>
  <p>두 번째 설명입니다.</p>

  <section>
    <p>section 안쪽 설명입니다.</p>
  </section>
</div>

CSS 코드입니다.

.card > p {
  color: red;
}

.card p {
  font-size: 18px;
}

h2 + p {
  font-weight: bold;
}

h2 ~ p {
  text-decoration: underline;
}

각 선택자의 의미는 다음과 같습니다.

정리

CSS 조합 선택자는 요소 사이의 관계를 기준으로 선택하는 방법입니다.

자식 선택자 A > B는 A의 바로 아래 자식 B를 선택합니다.

하위 선택자 A B는 A 안에 있는 모든 B를 선택합니다.

인접 형제 선택자 A + B는 A 바로 다음에 오는 B 하나를 선택합니다.

일반 형제 선택자 A ~ B는 A 뒤에 나오는 형제 B들을 선택합니다.

처음에는 자식 선택자와 하위 선택자, 인접 형제와 일반 형제를 비교해서 익히는 것이 좋습니다.

핵심은 >, 공백, +, ~ 기호의 차이를 구분하는 것입니다.