# CSS 선택자 정리 : 인접 형제 결합자부터 형제 선택자까지

웹 스타일링을 할 때 '어떤 요소를 기준으로 다른 요소를 선택할까' 하는 문제는 아주 자주 마주합니다. 이번 글에서는 인접 형제 결합자(+), 일반 형제 결합자(~) 를 중심으로, 관련된 선택자들을 예시와 함께 정리해서 티스토리 블로그에 바로 올릴 수 있게 작성했습니다. 코드 예시와 자주 쓰이는 패턴, 실전 팁까지 담았으니 복사해서 바로 사용하세요.

인접 형제(+), 일반 형제(~), 자식(>), 후손(스페이스) 선택자 차이와 예제 정리. 실무에서 자주 쓰이는 패턴과 주의사항까지 한 번에.

---

1) 개요 — 선택자(Combinators)란?

CSS 결합자(combinator)는 두 개 이상의 선택자 사이의 관계를 표현합니다. 예를 들어 ‘어떤 요소의 바로 다음 형제’라거나 ‘어떤 요소의 자식’ 같은 관계를 선택할 때 씁니다.

 

대표적인 결합자들 : 

공백( ) — 후손 선택자(descendant)

> — 자식 선택자(child)

+ — 인접 형제 결합자(adjacent sibling)

~ — 일반 형제 결합자(general sibling)

이번 글은 특히 +와 ~에 초점을 맞추고, 관련 선택자들과 차이를 비교합니다.

---

2) 인접 형제 결합자 +

정의: 같은 부모를 가지는 형제 요소 중 바로 다음에 오는 요소만 선택합니다.

<h2>제목</h2>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>


<style>
h2 + p {
margin-top: 0.5rem;
color: #2b6cb0;
}
</style>

위 예제에서 h2 + p는 h2 바로 다음에 나오는 p 하나만 대상으로 스타일이 적용됩니다. 첫 번째 단락에 적용됩니다.

 

실전 사용 사례

• 제목 바로 다음 단락에만 여백이나 폰트 스타일을 주고 싶을 때
• 목록 아이콘 바로 다음에 오는 설명에만 스타일을 적용할 때

주의사항

바로 옆(바로 다음) 형제만 선택하므로, h2와 p 사이에 다른 요소가 끼어들면 적용되지 않습니다.

---

3) 일반 형제 결합자 ~

정의: 같은 부모를 가지는 형제 요소들 중 선행 선택자 이후에 등장하는 모든 형제 요소들을 모두 선택합니다(단, 순서는 중요 — 앞에 있어도 선택되지 않음).

<h3>소제목</h3>
<p>내용 A</p>
<div>중간 박스</div>
<p>내용 B</p>


<style>
h3 ~ p {
color: #d53f8c;
}
</style>

 

위 예제에서 h3 ~ p는 내용 A와 내용 B 둘 다 선택합니다. h3 이후에 나타나는 모든 p가 대상입니다.

실전 사용 사례

• 경고 메시지 이후 페이지에서 특정 타입의 요소들 전체에 스타일을 주고 싶을 때
• 토글 버튼 이후 모든 형제 요소들의 상태를 바꾸고 싶을 때

주의사항

• 선택자는 앞→뒤 관계만 인식합니다. p ~ h3는 h3 앞에 있는 p를 선택하지 않습니다.

---

4) 관련 선택자와 비교

후손 선택자(공백): nav a — nav 내부의 모든 a (깊이에 상관 없음)

자식 선택자(>): ul > li — ul의 직계 자식인 li만

인접 형제(+): h2 + p — h2 바로 다음 형제 p 하나

일반 형제(~): h2 ~ p — h2 다음에 나오는 모든 형제 p

---

5) 실전 예제: FAQ 스타일 컴포넌트

<button class="q">질문 1</button>
<div class="a">답변 1</div>
<button class="q">질문 2</button>
<div class="a">답변 2</div>


<style>
.q + .a { display: none; }
.q:focus + .a,
.q[aria-expanded="true"] + .a { display: block; }
</style>

버튼 바로 다음에 오는 답변만 보이게 할 때 +를 사용하면 HTML 구조만으로 간단한 토글 UI를 구현할 수 있습니다.

---

6) 자주 하는 실수 & 팁

• 형제가 아닌 경우: 부모가 다르면 ~나 +로 선택되지 않습니다. (반드시 같은 부모여야 함)
• 공백/개행이 헷갈릴 때: HTML에서 공백/줄바꿈은 요소 간 텍스트 노드로 남지만, CSS 선택자 관계에는 영향을 주지 않습니다. 단, 다른 요소가 사이에 있다면 +는 적용되지 않습니다.
• 접근성: 시각적으로 토글을 구현할 때는 aria-expanded 같은 속성을 함께 사용하면 스크린리더 호환성이 좋아집니다.

---

7) 브라우저 호환성(간단히)

+와 ~는 오래전부터 지원되어 대부분의 브라우저에서 문제없이 동작합니다.

(IE9 이상에서 안정적으로 동작) — 실제 프로젝트에서 구체적인 버전이 필요하면 브라우저별 호환성 표를 추가하세요.

---

8) 마무리 — 언제 어떤 걸 써야 할까?

• 제목 바로 다음 요소 하나만 스타일을 주고 싶다면 +.
• 특정 요소 이후의 같은 타입 전체에 스타일을 주고 싶다면 ~.
• **구조적 관계(자식/후손)**를 기반으로 선택하려면 >나 공백을 사용.

원리만 알면 HTML 구조만 변경해서 원하는 스타일을 쉽게 제어할 수 있습니다.

실무에서는 접근성, 유지보수성, 그리고 HTML의 의미를 헤치지 않는 선에서 선택자를 사용하세요.