Combination Selector

 

🟢 Combination Selector

여러 선택자를 조합해서 특정 요소를 더 정확하게 선택하는 방법.

 

◼ Descendant Selector (자손 선택자)

특정 요소 내부에 포함된 모든 해당 요소 선택.

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

• 문법: 공백( ) 사용.

 

◼ Child Selector (자식 선택자)

특정 요소의 직계 자식만 선택.

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

• 문법: 꺽쇠 기호(>)를 사용.

 

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

특정 요소 바로 다음에 오는 첫 번째 형제만 선택.

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

• 문법: 더하기 기호(+)를 사용.

 

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

특정 요소 뒤에 오는 모든 형제 선택.

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

• 문법: 물결 기호(~)를 사용.

 

 

📍  POINT 📍 

✔️ 자손 선택자 (공백)은 깊이 상관없이 '안쪽' 전부, 자식 선택자 (>)은 딱 '한 단계 밑'만 선택된다. ✔️
✔️ 형제 선택자 (+, ~)는 반드시 코드 순서상 뒤에 있는 요소만 선택할 수 있다. (앞의 형제는 선택 불가) ✔️

 

 

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

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

 

---

 

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

<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>