以前のレッスンで基本的なセレクターを学んだけど、もっと細かく指定したいときはどうするの？例えば「リストの中の項目だけ」とか「ボタンにマウスを乗せたとき」とか…
いい質問だね！CSSではセレクターを組み合わせることで、もっと細かく要素を指定できるんだ。今回は6つの重要な組み合わせ方法を教えるよ。子孫セレクター、子セレクター、隣接セレクター、一般兄弟セレクター、複数セレクター、そして擬似クラスセレクターだ。
組み合わせって、複数のセレクターを一度に使うってことですか？
その通り！セレクターを組み合わせることで「特定の親要素の中にある子要素だけ」とか「複数の要素に同じスタイルを適用」とか、より柔軟な指定ができるようになるんだ。これによってWebサイトのデザインの自由度が格段に上がるよ！
子孫セレクター
子孫セレクターは、「家の中にある机」のように、特定の親要素の中にあるすべての子孫要素に対してスタイル変更できる便利な機能です。
ここでいう「子孫要素」とは、直接の子要素だけでなく、孫要素、曾孫要素、さらにその奥の要素まで、階層の深さに関係なくすべての内包された要素を指します。例えば「ナビゲーション内のリンクだけ色を変えたい」「サイドバーの見出しだけフォントサイズを小さくしたい」といった、場所を限定したスタイル指定ができます。
基本的な書き方
子孫セレクターは、親要素と子要素をスペースで区切って記述します：
/* 基本の記法 */
親セレクター 子セレクター {
プロパティ: 値;
}
- 記法のポイント 親セレクターと子セレクターの間に半角スペースを入れる
- 覚え方 「親の中にあるものすべて（子孫）」に届く
- 利点 同じ要素でも場所によって違うスタイルを適用でき、デザインの自由度が高い
- 応用例
.menu li a= 「menuクラスの中のliタグの中のaタグ」（3階層も可能）
実際のコード例
/* カード内の見出しすべて */
.card h3 {
background-color: darkgreen;
color: white;
font-size: 20px;
}対応するHTML（ハイライトされている箇所が対象要素）
<div class="card">
<h3>カードの見出し1</h3>
<div class="sub-section">
<h3>カード内のサブ見出し</h3>
<p>カード内の段落</p>
</div>
<h3>カードの見出し2</h3>
</div>本当だ。子要素も孫要素も全部緑になってる！
そう！子孫セレクターは「中にあるものすべて」を対象にするんだ。直接の子でも、孫でも、曾孫でも関係なく、とにかく内側にある要素なら全部対象になる。
この例では、.card h3でカード内のh3要素すべて（直接の子も、サブセクション内の孫要素も）が緑色になっているね。これが子孫セレクターの一番大事なポイントなんだよ。
子セレクター（>）
子セレクター（>）は、親要素の直接の子要素のみにスタイルを適用します。子孫セレクターとは異なり、孫要素やそれ以降の階層には適用されません。
例えば「メニューの直下にあるリスト項目だけにスタイルを適用して、サブメニューの項目は除外する」といった場面ではこの子セレクターが役立ちます。
基本的な書き方
/* 基本の記法 */
親セレクター > 子セレクター {
プロパティ: 値;
}- 記法のポイント 親セレクターと子セレクターの間に大なり記号（>）を入れる
- 覚え方 「親の直接の子」と覚える
- 用途 レイアウト構造が深い場合に、特定の階層だけをスタイル指定したいとき
- 利点 複雑なHTML構造でも意図しない要素への影響を避けられる
実際のコード例
/* カードの直接の見出しのみ */
.card > h3 {
background-color: darkgreen;
color: white;
font-size: 20px;
}対応するHTML（ハイライトされている箇所が対象要素）
<div class="card">
<h3>カードの見出し1</h3>
<div class="sub-section">
<h3>カード内のサブ見出し</h3>
<p>カード内の段落</p>
</div>
<h3>カードの見出し2</h3>
</div>お、子セレクターだと、カードの直下の見出しだけが緑になって、サブセクション内の見出しは緑にならないんですね！
その通り！子セレクター（>）は直接の親子関係だけを見るから、サブセクション内の見出しは対象外になるんだ。カードの直下のh3だけが緑になって、divの中のh3は普通のままだよね。これが子孫セレクターとの一番の違いなんだ。
隣接セレクター（+）
隣接セレクターは、同じ親を持つ兄弟要素のうち、すぐ隣にある要素にスタイルを適用します。
たとえば「見出しの直後の段落だけ」や「ラベルの直後の入力フィールドだけ」を対象にしたいときに便利で、ブログやドキュメントなど本文の流れを意識したデザインでよく使われます。
基本的な書き方
/* 基本の記法 */
基準セレクター + 隣接セレクター {
プロパティ: 値;
}- 記法のポイント 基準セレクターと隣接セレクターの間にプラス記号（+）を入れる
- 覚え方 「基準要素の直後にある隣の要素」と覚える
- 用途 見出しの直後の段落だけスタイルを変えたい場合など
- 特徴 「直後」のみ適用され、間に他の要素があると適用されない
- 実用例 リード文、フォーム要素の連携、アイコン付きテキストなど
実際のコード例
/* カードの見出し直後の段落をリード文として強調 */
.card h3 + p {
color: green;
font-size: 18px;
background-color: lightblue;
}対応するHTML（ハイライトされている箇所が対象要素）
<div class="card">
<h3>カードの見出し</h3>
<p>見出しの直後の段落（隣接セレクターの対象）</p>
<p>2番目の段落（対象外）</p>
<h3>別の見出し</h3>
<div class="notice">間に要素があると対象外</div>
<p>3番目の段落（対象外）</p>
</div>隣接セレクターは直後の要素だけが対象になるんですね！カードでは見出し直後の段落だけが緑色で背景も青くなってます。
そうだね！隣接セレクター（+）は「すぐ隣」という意味だから、.card h3 + pだと「見出しの直後にある段落」つまり最初の段落だけが対象になるんだ。2番目の段落は直後ではないので、普通のままだね。これが隣接セレクターの特徴だよ。
一般兄弟セレクター（~）
一般兄弟セレクターは、同じ親を持つ兄弟要素のうち、基準要素より後にあるすべての要素に対してスタイルを適用します。隣接セレクターとは違い、直後でなくても構いません。
例えば「特定の見出しより後にある段落すべてに共通のスタイルを適用したい」「警告メッセージの後にあるフォーム要素すべてを無効化スタイルにしたい」といった、範囲指定のスタイリングを行う際に便利です。
基本的な書き方
/* 基本の記法 */
基準セレクター ~ 兄弟セレクター {
プロパティ: 値;
}- 記法のポイント 基準セレクターと兄弟セレクターの間にチルダ記号（~）を入れる
- 覚え方 「基準要素より後にある同じ親の兄弟要素すべて」と覚える
- 隣接セレクターとの違い 隣接セレクター（
+）は直後のみ、一般兄弟セレクター（~）は後続のすべて - 用途 見出しの後にある複数の段落をまとめてスタイル変更したい場合など
- 範囲 基準要素より前の要素は選択されない（後続のみ）
実際のコード例
/* カードの見出し後のすべての段落にスタイル適用 */
.card h3 ~ p {
color: green;
font-style: italic;
background-color: lightblue;
}対応するHTML（ハイライトされている箇所が対象要素）
<div class="card">
<h3>カードの見出し</h3>
<p>1番目の段落（一般兄弟セレクターの対象）</p>
<div class="notice">間に要素があっても</div>
<p>2番目の段落（一般兄弟セレクターの対象）</p>
</div>一般兄弟セレクターだと、カードの見出し以降の段落がすべて緑色で斜体になってますね！間にdivがあっても関係なく対象になってます。
その通り！一般兄弟セレクター（~）は「基準要素より後にある同じ親の兄弟要素すべて」を選ぶから、h3より後の段落がすべて対象になるんだ。間にdivがあっても関係ないところが隣接セレクター（+）との大きな違いだね。
複数セレクター
複数セレクターは、「同じ制服を着せたい生徒たち」のように、複数の異なる要素に同じスタイルを適用できます。
例えば「見出しは全部同じフォントにしたい」「ボタンは全部同じ見た目にしたい」といった場合に、コードを重複させずに効率的にスタイルを設定できます。
基本的な書き方
複数セレクターは、適用したいセレクターをカンマで区切って記述します：
/* 基本の記法 */
セレクターA, セレクターB, セレクターC {
プロパティ: 値;
}- 記法のポイント セレクター同士を半角カンマで区切る
- 覚え方 「AとBとC、すべてに同じスタイルを適用」と覚える
- 利点 コードの重複を防ぎ、保守性が向上する。一箇所修正すれば全ての該当要素に反映される
- 応用例
nav a, .menu a, footer a= 「ナビのリンクとメニューのリンクとフッターのリンク」
実際のコード例
/* 見出しに同じスタイルを適用 */
h1, h2, h3 {
background-color: darkgreen;
color: white;
}対応するHTML（ハイライトされている箇所が対象要素）
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<h3>見出し3</h3>
<p>普通の段落（スタイル適用外）</p>複数セレクターって、どんなときに使うとよいですか？
実際の制作では結構よく使うよ！例えば
- 統一感を出したいとき
- 同じ機能の要素をまとめるとき
- メンテナンスを楽にしたいとき
など。実務では保守性が重要だから、複数セレクターは本当に便利な機能なんだ。
擬似クラスセレクター
擬似クラスセレクターは、要素の特別な状態や条件にスタイルを適用する機能です。ユーザーがマウスを乗せたり、クリックしたり、フォーカスしたりといったインタラクションに反応してスタイルを変更できます。
基本的な書き方
擬似クラスセレクターは、セレクターの後にコロンと擬似クラス名を記述します：
/* 基本の記法 */
セレクター:擬似クラス名 {
プロパティ: 値;
}- 記法のポイント セレクターと擬似クラス名の間に半角コロンを入れる
- 覚え方 「セレクターが○○の状態のとき」と覚える
- 用途 ユーザーの操作や要素の状態に応じたスタイル変更
- 利点 インタラクティブなユーザー体験を提供でき、使いやすさが大幅に向上する
主要な擬似クラスの種類
- :hover マウスを要素の上に乗せたとき（最もよく使われる）
- :active 要素をクリックしている瞬間
- :focus 入力フィールドなどにフォーカスが当たったとき
- :first-child 親要素の最初の子要素
- :last-child 親要素の最後の子要素
- :nth-child() 特定の順番の子要素（例：2番目、偶数番目など）
- 実際の指定例
:nth-child(2)= 2番目の子要素:nth-child(odd)= 奇数番目の子要素（1, 3, 5…）:nth-child(even)= 偶数番目の子要素（2, 4, 6…）:nth-child(3n)= 3の倍数番目の子要素（3, 6, 9…）
実際のコード例
/* ボタンにマウスを乗せたとき */
button:hover {
background-color: darkgreen;
color: white;
font-size: 20px;
}
/* リンクにマウスを乗せたとき */
a:hover {
color: red;
}対応するHTML（ハイライトされている箇所が対象要素）
<button>ホバーしてみてください</button>
<a href="#">こちらのリンクにもホバーしてみてください</a>
<p>普通の段落（ホバー効果なし）</p>
<span>普通のテキスト（ホバー効果なし）</span>疑似クラスセレクターの動作を実際に試してみてください。ボタンとリンクにマウスを乗せてみてください：
すごい！マウスを乗せるだけで色が変わるんだね！これだけでWebサイトが一気に動的になった感じがする！
そうそう！擬似クラスはユーザビリティを大幅に向上させるんだ。特に:hoverは「ここがクリックできる」ということをユーザーに知らせる重要な役割があるよ。実際のWebサイトでもよく使われているテクニックなんだ。
マウス操作以外にも、キーボードで操作する人もいますよね？
とても大切な視点だね！キーボードで操作する人やスクリーンリーダーを使う人のために、:focus擬似クラスがあるんだ。これはTabキーでフォーカスした時にスタイルが適用される。アクセシビリティの観点からとても重要なんだよ。
:focusでアクセシビリティを向上
/* 入力フィールドにフォーカスが当たったとき */
input:focus {
outline: 2px solid #3BB8C4;
background-color: #f0f9ff;
}対応するHTML（Tabキーで移動してフォーカスを確認）
<label for="name">お名前：</label>
<input type="text" id="name" placeholder="名前を入力">Tabキーで移動すると、入力欄に青い枠が付くんですね！これなら画面を見ないでも、どこにフォーカスがあるかわかりそうです。
そういうこと！:focusは視覚的な手がかりを提供するから、キーボード操作やスクリーンリーダーを使う人にとって非常に重要なんだ。すべての人が快適に使えるWebサイトを作るために、:hoverと:focusはセットで覚えておこう。
擬似クラスを使うと、Webサイトが「生きている」ような感覚になります。ユーザーの操作に反応してリアルタイムでスタイルが変わるので、使いやすさと視覚的な楽しさの両方を提供できます。
理解度チェッククイズ
セレクター応用ミニクイズ
/* CSS */
.container p {
color: green;
}
/* HTML */
<div class="container">
<div>
<p>段落1</p>
</div>
</div>
<p>段落2</p>/* CSS */
.container > p {
background: darkgreen;
color: white;
}
/* HTML */
<div class="container">
<p>直下の段落</p>
<div>
<p>入れ子の段落</p>
</div>
</div>/* CSS */
h2 + p {
font-size: 16px;
}
/* HTML */
<h2>見出し</h2>
<p>最初の段落</p>
<p>2つ目の段落</p>/* CSS */
h2 ~ p {
font-size: 16px;
}
/* HTML */
<h2>見出し</h2>
<p>最初の段落</p>
<div>別の要素</div>
<p>2つ目の段落</p>/* CSS */
h1, h2, button {
background: darkgreen;
color: white;
}
/* HTML */
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<button>押す</button>
<p>段落</p>/* CSS */
button:hover {
color: blue;
}
/* HTML */
<button>ホバーしてね</button>
<span>テキスト</span>まとめ
セレクターの組み合わせって、こんなにパワフルなんだね！基本セレクターだけの時と比べて、できることがすごく広がった感じがする。
その通り！今回学んだ組み合わせ技術を使うことで、CSSの表現力が格段に向上するんだ。特に擬似クラスは、ユーザーとのインタラクションを豊かにするために欠かせない技術だよ。
実際のWebサイトでも、これらの技術はよく使われているんですか？
もちろん！どのWebサイトでも必ずと言っていいほど使われているよ。特に:hoverはユーザビリティの基本だし、子孫セレクターは複雑なレイアウトを作るときに必須の技術なんだ。複数セレクターも、メンテナンスしやすいCSSを書くために重要な役割を果たしているよ。
- 子孫セレクター（スペース） 特定の親要素内のすべての子孫要素をピンポイントでスタイル指定（例：
nav a） - 子セレクター（
>） 直接の親子関係にある要素のみを選択（例：article > p） - 隣接セレクター（
+） 特定要素の直後にある兄弟要素のみを選択（例：h2 + p） - 一般兄弟セレクター（
~） 特定要素より後にあるすべての兄弟要素を選択（例：h2 ~ p） - 複数セレクター（
,） 異なる要素に同じスタイルを効率的に適用し、保守性を向上（例：h1, h2, h3） - 擬似クラス（
:） ユーザーのインタラクションに反応する動的なスタイル（例：:hover、:focus） - 組み合わせ技 これらのセレクターを組み合わせて、より具体的で精密な指定が可能
- 実用性重視
:hoverは必須、構造に応じてセレクターを使い分けることが重要 - アクセシビリティ
:focusも重要で、キーボードユーザーへの配慮も忘れずに
第5章で学ぶ予定の高度なセレクター: 属性セレクター（[type="text"]）、全称セレクター（*）、否定疑似クラス（:not()）なども存在しますが、これらは第1章の基礎を固めた後に学習します。
次回は、これらのセレクターが競合したときの優先順位「カスケード」について学び、CSSの仕組みをより深く理解していきましょう。