4. 셀렉터

자식 / 후손 / 형제 셀렉터

1.자식 셀렉터

• header > div {}
  첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
  <p> 요소의 자식인 <div>요소는 선택되지 않음

<header>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
</header>

2. 후손 셀렉터

• header div {}
  첫 번째로 입력한 요소의 후손을 선택
  <header>요소의 자식인 <div> 요소뿐 아니라,<p>요소의 자식인 <div>도 선택 됨

<header>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
</header>

3.형제 셀렉터

• section ~ p { }
  같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

4.인접 형제 셀렉터

• section + p { }
  같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>