5.1 セレクターの種類
CSSの組み合わせセレクターは、DOMツリーにおける要素の相互の位置関係に基づいて要素を選択できるようにするよ。これにより、スタイルをより正確に管理し、要素のコンテキストによってスタイリングを行うことができるんだ。CSSにはいくつかの組み合わせセレクターのタイプがあるよ: 子孫、子要素、隣接兄弟要素、一般兄弟要素。
組み合わせセレクターの種類:
- 子孫セレクター (Descendant Selector)
- 子要素セレクター (Child Selector)
- 隣接兄弟要素セレクター (Adjacent Sibling Selector)
- 一般兄弟要素セレクター (General Sibling Selector)
5.2 子孫セレクター
子孫セレクターは、指定された要素の子孫であるすべての要素を選択するよ。子孫とは、指定された要素のあらゆる階層での内包要素のことを指すんだ（子だけでなく、孫やひ孫も含まれるよ）。
構文:
親 子孫 {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* <div> の中にあるすべての <p> を選択する */
div p {
color: blue;
}
HTML
<div>
<p>この段落は青くなるよ。</p>
<div>
<p>この段落も青くなるよ、だって "div" の子孫だからね。</p>
</div>
</div>
<p>この段落は青くならないよ。</p>
5.3 子要素セレクター
子要素セレクターは、指定された親の直接の子要素のみを選択するよ。
構文:
親 > 子要素 {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* .container の直接の子要素である <p> のみを選択する */
.container > p {
color: green;
}
HTML
<div class="container">
<p>この段落は緑色になるよ。</p>
<div class="wrapper">
<p>この段落は緑色にならないよ、だって .container の直接の子要素じゃないからね。</p>
</div>
<p>この段落は緑色になるよ。</p>
</div>
<p>この段落は緑色にならないよ。</p>
5.4 隣接兄弟要素セレクター
隣接兄弟要素セレクターは、指定された要素のすぐ後に続く要素を選択し、同じ階層であることを条件としているよ。
構文:
前の + 次の {
プロパティ: 値;
プロパティ: 値;
}
CSS
/* <h1> のすぐ後に続く <p> を選択する */
h1 + p {
color: red;
}
HTML
<h1>見出し 1</h1>
<p>この段落は赤くなるよ、だって "h1" の直後だからね。</p>
<p>この段落は赤くならないよ。</p>
5.5 一般兄弟要素セレクター
一般兄弟要素セレクターは、指定された要素の後に続くすべての要素を選択し、同じ階層であることが条件だよ。
構文:
前の ~ 次の {
プロパティ: 値;
プロパティ: 値;
}
例:
CSS
/* 同じ階層で <h1> の後に続くすべての <p> を選択する */
h1 ~ p {
color: purple;
}
HTML
<h1>見出し 1</h1>
<p>この段落は紫色になるよ。</p>
<p>この段落も紫色になるよ。</p>
<div>
<p>この段落は紫色にならないよ、だって別の階層にいるからね。</p>
</div>
GO TO FULL VERSION