チャイルド・セレクタ（chiled selector）
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ チャイルド・セレクタ

　チャイルド・セレクタ（chiled selector）は、ある要素E の直下に位置する特定の要素 F すべて（子孫を含む）をスタイルの適用領域を指定するセレクタです。

E  >  F

　div要素の直下のpre要素と、その子孫にスタイルを適用します。

body       {black;}
div > pre  {color:red;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSのセレクタの使用例</title>
<meta name="description" content="CSSのセレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="child_selector_sample.css" type="text/css">
</head>
<body>
body
	<div>
body/div
		<pre>
body/div/pre
			<span>
body/div/pre/span
			</span>
			<table><tbody><tr><td>body/div/pre/table</td></tr></tbody></table>
		</pre>
	</div>
	<pre>
body/pre
	</pre>
	<div>
body/div
		<span>
body/div/span
			<pre>
body/div/span/pre
			</pre>
		</span>
	</div>
</pre>
</body>
</html>

　チャイルド・セレクタとディセンダント・セレクタを組み合わせることもできます。

E1  E2>E3  E4

　次の例はdiv要素の子孫のpre要素の直下のspan要素の子孫のp要素と、その子孫にスタイルを適用します。

body            {black;}
div pre>span p  {color:red;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSのセレクタの使用例</title>
<meta name="description" content="CSSのセレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="child_selector_sample2.css" type="text/css">
</head>
<body>
body
	<div>
body/div
		<pre>
body/div/pre
			<span>
body/div/pre/span
				<p>
body/div/pre/span/p
					<span>
body/div/pre/span/span
					</span>
				</p>
			</span>
		</pre>
	</div>
</body>
</html>
▼ Property