[CSS3] ⭐️부모-자식 vs 형제 관계는 CSS 선택자

부모-자식 vs 형제 관계 CSS 선택자 ⭐️

 

 

HTML에서의 부모와 형제 관계 이해하기

먼저 HTML 구조에서 '부모'와 '형제'가 무엇인지 명확히 알아야 해요.

<div id="부모">
  <h1>자식1 (h1)</h1>
  <p>자식2 (p)</p>
  <ul>
    <li>손자1 (li)</li>
    <li>손자2 (li)</li>
  </ul>
</div>
<p>div의 형제 (p)</p>

• div#부모는 h1, p, ul의 부모 요소입니다.
• h1, p, ul은 div#부모의 자식 요소입니다.
• h1, p, ul은 서로 형제 관계입니다. (같은 부모를 가졌죠!)
• ul 안의 li들은 ul의 자식이고, div#부모의 손자 (자손) 입니다.
• 마지막 p 태그는 div#부모와 형제 관계입니다. (같은 레벨에 있죠!)

---

 

 

1. 기본 개념 이미지

<!-- 가계도처럼 생각해보세요! -->
<div class="parent">      ← 부모 요소
  <p>첫째</p>            ← 자식 (동시에 형제들 간의 관계)
  <section>              ← 자식이면서 p의 형제
    <span>손자</span>    ← section의 자식 (div의 손자)
  </section>
  <p>둘째</p>           ← 첫째 p의 형제
</div>

---

2. 헷갈리는 4가지 관계 선택자

(1) 부모-자식 (Parent > Child) ➔ A > B

• 직계 1단계만 선택 (손자는 X)

.parent > p { color: red; }  

→ 첫째 p, 둘째 p만 선택 (section은 div의 자식이지만 p가 아니므로 제외)

(2) 모든 자손 (Parent Child) ➔ A B

• 하위 모든 계층 선택 (자식 + 손자 + 증손자...)

.parent span { background: yellow; }  

→ section 안의 span 선택 (부모-자식 관계가 아니어도 됨!)

(3) 바로 다음 형제 (A + B) ➔ 인접 형제

• 바로 뒤에 오는 1개 요소만 선택

p + section { border: 1px solid; }  

→ 첫째 p 바로 다음 section에 적용 (둘째 p 앞의 section은 없으므로 X)

(4) 모든 뒤 형제 (A ~ B) ➔ 일반 형제

• 같은 부모 아래 뒤에 오는 모든 요소

p ~ p { font-weight: bold; }  

→ 첫째 p 뒤에 있는 모든 p 선택 (둘째 p만 적용)

---

3. 실제 헷갈리는 케이스 모음

Case 1: div p vs div > p

<div>
  <p>1번</p>          <!-- 둘 다 선택 -->
  <article>
    <p>2번</p>      <!-- div p만 선택 (자식X 손자O) -->
  </article>
</div>

Case 2: section + p vs section ~ p

<section>섹션</section>
<div>중간에 낀 div</div>
<p>문단1</p>        <!-- ~ 선택자만 적용 -->
<p>문단2</p>        <!-- ~ 선택자만 적용 -->

---

4. 암기 꿀팁 🍯

1. > : 화살표 모양 → 직진해서 딱 1단계
   → ex) 엄마(div) > 딸(p) (며느리(section)는 선택 X)
2. + : 플러스 하나 → 옆집 첫 번째 이웃만
   → ex) 옆집 사는 형(+1호)
3. (공백) : 계층 무시하고 모두 탐색
   → ex) 가족 중 이름이 p인 사람 모두 찾기
4. ~ : 물결처럼 퍼져나감 → 뒤에 있는 모두
   → ex) 형이 시작한 뒤로 모든 동생들

---

5. 연습 문제 (직접 생각해보세요!)

<div class="family">
  <ul>
    <li>사과</li>      <!-- 문제1 -->
  </ul>
  <li>바나나</li>     <!-- 문제2 -->
  <p>과일 목록</p>   <!-- 문제3 -->
</div>

• Q1. .family li → 어떤 요소가 선택될까요?
• Q2. .family > li → 어떤 요소가 선택될까요?
• Q3. ul + li → 적용되나요?

(정답)
1: 사과, 바나나 | 2: 바나나 | 3: X (ul 다음 li가 없음)

➔ 헷갈리면 직접 코드를 작성해보세요! 눈으로 보는 게 최고의 학습법입니다 😊