Combination Selector

요소들 사이의 관계를 이용해 스타일을 적용하는 **CSS 연결 선택자(Combinators)**에 대해 알아보겠습니다.

연결 선택자는 단순히 하나의 태그를 선택하는 것을 넘어, "어떤 태그 안에 있는 태그"나 "어떤 태그 바로 뒤에 오는 태그"처럼 요소 간의 계층 구조를 활용해 정교하게 스타일을 입히는 도구입니다.

---

1. 자손 선택자 (Descendant Selector)

특정 요소 내부에 포함된 모든 해당 요소를 선택합니다. 공백( )으로 구분합니다.

• 설명: 부모 안에 있기만 하면 자식이든, 손자든 상관없이 모두 선택합니다.
• 용도: 특정 구역(예: 메뉴바) 안에 있는 모든 링크 스타일을 바꿀 때 유용합니다.

CSS

 

/* div 안에 있는 모든 p 태그를 선택 */
div p {
  color: blue;
}

---

2. 자식 선택자 (Child Selector)

특정 요소의 직계 자식만 선택합니다. 꺽쇠 기호(>)를 사용합니다.

• 설명: 바로 아래 계층에 있는 요소만 선택하며, 손자나 그 아래 계층은 무시합니다.
• 용도: 구조가 복잡할 때 의도치 않은 하위 요소까지 스타일이 먹히는 것을 방지합니다.

CSS

 

/* div 바로 아래에 있는 p 태그만 선택 (손자 p는 제외) */
div > p {
  border: 1px solid black;
}

---

3. 인접 형제 선택자 (Adjacent Sibling Selector)

특정 요소 바로 다음에 오는 첫 번째 형제만 선택합니다. 더하기 기호(+)를 사용합니다.

• 설명: 같은 부모를 공유하는 형제들 중, 기준 요소 바로 뒤에 딱 하나 붙어 있는 요소만 고릅니다.
• 용도: 제목(h1) 바로 뒤에 오는 첫 번째 문단(p)에만 특별한 여백을 줄 때 자주 씁니다.

CSS

 

/* h1 바로 뒤에 나오는 p 태그 하나만 선택 */
h1 + p {
  font-weight: bold;
}

---

4. 일반 형제 선택자 (General Sibling Selector)

특정 요소 뒤에 오는 모든 형제를 선택합니다. 물결 기호(~)를 사용합니다.

• 설명: 기준 요소보다 뒤에 있기만 하면, 바로 옆이 아니더라도 모든 형제 요소를 선택합니다. (앞에 있는 형제는 선택 안 됨)
• 용도: 특정 요소 이후에 등장하는 모든 콘텐츠의 스타일을 일괄 변경할 때 씁니다.

CSS

 

/* h1 뒤에 오는 모든 p 태그를 선택 */
h1 ~ p {
  color: gray;
}

---

🖥️ 실전 예제 코드: "계층 구조 스타일링"

이 코드를 실행해 보면 각 선택자가 어떻게 범위를 제한하는지 한눈에 알 수 있습니다.

HTML

 

<style>
  /* 1. 자손 선택자: section 안의 모든 span은 노란색 배경 */
  section span { background-color: yellow; }

  /* 2. 자식 선택자: section 직속 자식인 p만 빨간 글씨 */
  section > p { color: red; }

  /* 3. 인접 형제 선택자: h2 바로 뒤의 p에 밑줄 */
  h2 + p { text-decoration: underline; }

  /* 4. 일반 형제 선택자: h2 뒤의 모든 div에 테두리 */
  h2 ~ div { border: 1px dashed blue; }
</style>

<section>
  <p>나는 자식 p입니다. (빨간색)</p>
  <div>
    <p>나는 손자 p입니다. (검정색)</p>
    <span>나는 손자 span입니다. (노란 배경)</span>
  </div>
  
  <h2>소제목</h2>
  <p>나는 h2 바로 뒤의 p입니다. (밑줄)</p>
  <p>나는 그냥 뒤에 있는 p입니다.</p>
  <div>형제 div 1 (파란 테두리)</div>
  <div>형제 div 2 (파란 테두리)</div>
</section>

---

📋 연결 선택자 한눈에 요약표

선택자	기호	의미	선택 범위
자손	(공백)	A 안의 모든 B	자식, 손자, 증손자 포함
자식	>	A 바로 밑의 B	직계 자식만
인접 형제	+	A 바로 뒤의 B	바로 인접한 형제 1개
일반 형제	~	A 뒤에 오는 모든 B	순서상 뒤에 있는 모든 형제

---

학습 정리

• 공백은 깊이 상관없이 '안쪽' 전부, **>**는 딱 '한 단계 밑'만 본다.
• 형제 선택자(+, ~)는 반드시 코드 순서상 뒤에 있는 요소만 선택할 수 있다. (앞의 형제는 선택 불가)
• 선택자를 너무 길게 연결하면(예: div > ul > li > a) 코드가 복잡해지므로 적절한 클래스명과 병행하는 것이 좋다.

---

요소 간의 관계를 이용해 스타일을 자유자재로 다루는 연결 선택자를 마스터하셨습니다!

---