ディセンダント・セレクタ（descendant selector）
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ ディセンダント・セレクタ

　ディセンダント・セレクタ（descendant selector）は、ある要素E の子孫にあたる特定の要素 F をスタイルの適用領域を指定するセレクタです。要素 E にはスタイルは適用されません。

E  F

　次のCSSコードは、div要素の子孫にpre要素が見つかればスタイルを適用します。

body 	{color:black;}
div pre	{color:blue;}

<!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="descendant_selector_sample.css" type="text/css">
</head>
<body>

<div>
	<pre>
body/div/pre　①div要素の子孫のpre要素にスタイルが適用される
		<span>body/div/pre/span</span>
		<table><tbody><tr><td>body/div/pre/table</td></tr></tbody></table>
	</pre>
</div>

<span>
	<pre>
		<span>body/span/pre/span　②div要素の子孫でなければpre要素にスタイルは適用されない</span>
		<div>
			<span>
				<pre>
				body/span/pre/div/span/pre<br>　③div要素の直下がpre要素でない場合でもその子孫にpre要素があればスタイルを適用
				</pre>
			</span>
		</div>
	</pre>
</span>


</body>
</html>

　スタイルの適用範囲として孫要素を指定することもできます。

E  *  F

　上記の書式では、要素 E の孫である 要素 F にスタイルを適用します。

　次のCSSコードは、div要素の孫要素のpre要素にスタイルを適用します（divの直下のpre要素には適用されません）。

body 		{color:black;}
div * pre	{color:blue;}

<!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="descendant_selector_sample2.css" type="text/css">
</head>
<body>
<div>
	<pre>
body/div/pre　①div要素の直下のpre要素にはスタイルは適用されない
		<pre>
body/div/pre/pre　②div要素の孫のpre要素とその子孫にスタイルが適用される
			<span>body/div/pre/span</span>
			<table><tbody><tr><td>body/div/pre/table</td></tr></tbody></table>
		</pre>
	</pre>
</div>
</body>
</html>

　ディセンダント・セレクタを属性セレクタと組み合わせて使うこともできます。

E  F  *[att]

　このセレクタは、要素 E の子孫、要素 F 内のattの属性を持つ要素にスタイルを適用します。

　次のCSSコードは、div要素の子孫のpre要素内でhref属性を持つ要素にスタイルを適用します。

body 			{color:black;}
div pre *[href]	{font-size:20px;}

<!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="descendant_selector_sample3.css" type="text/css">
</head>
<body>
<a href="https://books-nekoya.jp/" target="_blank">body</a>
<div>
<a href="https://books-nekoya.jp/" target="_blank">body/div</a>
	<pre>
div要素の子孫のpre要素内のhref属性を持つ要素にスタイルを適用
<a href="https://books-nekoya.jp/" target="_blank">body/div/pre</a>
		<span><a href="https://books-nekoya.jp/" target="_blank">body/div/pre/span</a></span>
	</pre>
</div>
</body>
</html>
▼ Property