1. 組み合わせセレクタの種類
CSS の組み合わせセレクタは、他の要素との階層的な位置関係に基づいて要素を選択することを可能にするよ。これにより、コンテキストに依存する要素や、複雑な構造内の要素にスタイルを適用するのに役立つんだ。組み合わせセレクタは、クラスや ID が足りない場合に正確に選択できる強力なツールだね。CSS の基本的な組み合わせセレクタのタイプには、子孫セレクタ、子要素セレクタ、隣接セレクタ、一般兄弟セレクタが含まれるよ。
CSS の組み合わせセレクタには、HTML の階層に基づいて要素を選択するさまざまな方法が含まれているよ。基本的な種類は以下のとおり：
- 子孫セレクタ (Descendant Selector): 他の要素内にある、どのレベルのネストでもすべての要素を選択するよ。
- 子要素セレクタ (Child Selector): 特定の要素の直接（直近の）子要素だけを選択するんだ。
- 隣接セレクタ (Adjacent Sibling Selector): 同じ階層にあって、ある要素のすぐ後に続く要素を選択するよ。
- 一般兄弟セレクタ (General Sibling Selector): 指定した要素の後に続く、同じ階層にあるすべての要素を選択するよ。
これらのセレクタのそれぞれは、ページ上の要素の位置に応じて正確に選択するのに適しているよ。
2. 子孫セレクタ (Descendant Selector)
子孫セレクタは、ネストのレベルに関係なく、他の要素内にあるすべての要素を選択するんだ。セレクタ同士をスペースで区切って記述するよ。このタイプのセレクタは、たとえば、特定のクラスを持つ <div> 内のすべての <p> をスタイリングしたい場合に便利だね。
.container p {
color: blue;
}
<div class="container">
<p>このテキストは青くなる、なぜならコンテナ内にあるから。</p>
<div>
<p>このテキストも青くなる。</p>
</div>
</div>
<p>このテキストは何も変わらない、なぜならコンテナ内にないから。</p>
ここでは、セレクタ .container p は、クラス container を持つ要素内にある、すべての <p> 要素を選択するよ。どのネストレベルでもね。
3. 子要素セレクタ (Child Selector)
子要素セレクタは、要素の直接の子だけを選択するよ。セレクタ同士を > 記号で区切って記述するんだ。このセレクタは、スタイルを適用したい要素が親要素の直接的な子であり、それより深いレベルの要素には適用したくない場合に便利だよ。
.container > p {
font-weight: bold;
}
<div class="container">
<p>このテキストは太字になる。</p>
<div>
<p>このテキストは変わらない、なぜなら container の直接の子要素ではないから。</p>
</div>
</div>
ここでは、最初の <p> だけが太字になるよ。なぜならそれが .container の直接の子要素だからで、ネストされた <p> は変更されないよ。
4. 隣接セレクタ (Adjacent Sibling Selector)
隣接セレクタは、同じネストレベルにあって、ある要素の直後に続く要素を選択するよ。このセレクタは、セレクタ同士を + 記号で区切って記述し、たとえば見出しに続く最初の段落にスタイルを適用する場合などに便利だね。
h2 + p {
color: green;
}
<h2>見出し</h2>
<p>このテキストは緑色になる、なぜなら見出しの直後に続くから。</p>
<p>このテキストは何も変わらない、なぜなら h2 の隣接要素ではないから。</p>
ここでは、セレクタ h2 + p は、<h2> の直後に続く最初の <p> 要素だけに色を変えるよ。
5. 一般兄弟セレクタ (General Sibling Selector)
一般兄弟セレクタは、指定した要素の後に続く、同じネストレベルにあるすべての要素を選択するよ。要素の間に他の要素があっても選択されるんだ。このセレクタは、セレクタ同士を ~ 記号で区切って記述するよ。
h2 ~ p {
font-style: italic;
}
<h2>見出し</h2>
<p>この段落はイタリック体になる。</p>
<div>
<p>この段落もイタリック体になる、なぜなら h2 の兄弟要素だから。</p>
</div>
この例では、セレクタ h2 ~ p は、<h2> の後に続くすべての <p> 要素を選択するよ。同じレベルにあればね。
6. 組み合わせセレクタをすべて使った例
以下の例は、ページ上の位置に応じて異なる要素を選択するために、すべての組み合わせセレクタを使った HTML と CSS を示しているよ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 組み合わせセレクタの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>.container の子孫かつ子要素である段落。</p>
<div>
<p>.container の子孫だが子要素ではない段落。</p>
</div>
</div>
<h2>見出し</h2>
<p>h2 の隣接する兄弟要素である段落。</p>
<div>このブロックは次の段落に影響しない。</div>
<p>h2 の一般兄弟要素である段落。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 組み合わせセレクタの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>.container の子孫かつ子要素である段落。</p>
<div>
<p>.container の子孫だが子要素ではない段落。</p>
</div>
</div>
<h2>見出し</h2>
<p>h2 の隣接する兄弟要素である段落。</p>
<div>このブロックは次の段落に影響しない。</div>
<p>h2 の一般兄弟要素である段落。</p>
</body>
</html>
/* 子孫セレクタ */
.container p {
color: blue;
}
/* 子要素セレクタ */
.container > p {
font-weight: bold;
}
/* 隣接セレクタ */
h2 + p {
color: green;
}
/* 一般兄弟セレクタ */
h2 ~ p {
font-style: italic;
}
GO TO FULL VERSION