자식 선택자

음료


heading

문단A

문단B

문단C

문단D

"> 자식 선택자

자식 선택자

음료


heading

문단A

문단B

문단C

문단D

"> 자식 선택자

자식 선택자

음료


heading

문단A

문단B

문단C

문단D

"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자</title>
<!--
	# 자식 선택자
	- 특정한 태그 아래에 있는 태그만을 선택할 때 사용.
	- 선택자A > 선택자B  
-->
<style type="text/css">
#section > h3{color: blue;}
#section > ul > li{color: red;}

#content > p {color: gold;}
</style>
</head>
<body>
	<h1>자식 선택자</h1>
	<div id="section">
		<h3>음료</h3>
		<ul>
			<li>coffee</li>
			<li>juice</li>
			<li>cola</li>
		</ul>
	</div><br>
	<h1>heading</h1>
	<div id="content">
		<p>문단A</p>
		<p>문단B</p>
		<div>
			<p>문단C</p>
		</div>
	</div>
	<p>문단D</p>
</body>
</html>