子孫セレクタ
Coddyの「CSSセレクター」コースのレッスン 8/15。
前のトピックでは、要素の直接の子をターゲットにする子結合子について学びました。次は、空白で表される子孫セレクターについて見ていきましょう。子孫セレクターを使用すると、直接の子だけでなく、別の要素内の任意のレベルにネストされている要素をターゲットにすることができます。
構文
selector1 selector2 {
/* プロパティの宣言 */
}例えば、
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>上記のCSSルールは、両方の段落を赤色にし、フォントサイズを2emに設定します。
子セレクターとの関係は？
子孫セレクターは、子セレクターよりも一般的です。つまり、子孫セレクターは指定された要素の子孫であるすべての要素に一致しますが、子セレクターは指定された要素の直接の子である要素にのみ一致します。
例えば、セレクター div p は、他の p 要素の中にネストされている p 要素を含め、div 要素の子孫であるすべての p 要素に一致します。セレクター div > p は、div 要素の直接の子である p 要素にのみ一致します。
チャレンジ
簡単前の演習を基にして、同じHTML構造を使用しましょう。子孫セレクタを使用して、ネストの深さに関係なく、.list要素内にあるすべての段落（paragraph）にスタイルを適用するCSSルールを記述してください。色、サイズ、フォントを自由に変更してください。
自分で試してみよう
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>