子セレクタ
Coddyの「CSSセレクター」コースのレッスン 7/15。
子セレクタは、指定された要素の直接の子であるすべての要素を選択するCSSセレクタの一種です。子セレクタは、2つのセレクタの間に不等号（>）を置くことで表されます。
例:
次のHTML構造を考えてみましょう：
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>直接の子である段落をターゲットにするには、次のように子結合子を使用します：
.parent > p {
color: blue;
}この例では、直接の子である段落だけが青色になり、内側の <div> 内に入れ子になっている段落は青色になりません。
子セレクタは、指定された要素の直接の子ではない要素にスタイルが適用されるのを避けるためにも使用できます。例えば、子セレクタを使用して、p 要素の直接の子であるすべてのリンクを赤色にスタイル設定できます。
チャレンジ
簡単次のHTML構造が与えられたとき、子結合子を使用してCSSルールを作成し、<ul>要素内の直接のリスト項目の背景色を yellow に設定してください。
自分で試してみよう
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>