CSSセレクタ 完全チートシート【日本語・2026年最新版】書き方・指定方法を一覧まとめ！
📖 CSSセレクタとは
CSSセレクタ（Selector）は、HTMLドキュメント内の特定の要素を選択し、スタイルを適用するためのパターンです。CSSの最も基本的で重要な概念の一つであり、適切なセレクタを使用することで、効率的で保守しやすいスタイルシートを作成できます。
セレクタは、要素の種類、クラス名、ID、属性、位置、状態など、様々な条件に基づいて要素を選択できます。最新のCSS仕様では、より強力で柔軟なセレクタが追加され、複雑な選択要件も簡単に実現できるようになりました。
{
color: blue;
}
セレクタの重要性：
- 適切なセレクタは、コードの可読性と保守性を向上させます
- セレクタの特異性（Specificity）を理解することで、スタイルの競合を防げます
- 最新のセレクタを使用することで、より簡潔で強力なスタイルを書けます
- パフォーマンスを考慮したセレクタの選択が重要です
🎯 セレクタの特異性（Specificity）
CSSでは、複数のルールが同じ要素に適用される場合、特異性（Specificity）の高いルールが優先されます。特異性は、セレクタの種類と組み合わせによって決まります。
特異性は以下の順序で計算されます：
💡 ヒント：特異性が同じ場合は、後に書かれたルールが優先されます。また、!importantを使用すると、すべてのルールより優先されますが、多用は避けるべきです。
🔤 基本セレクタ
要素セレクタ（Type Selector）
要素名
要素セレクタは、指定した要素名（タグ名）に一致するすべての要素を選択します。最も基本的なセレクタで、特定の種類の要素すべてにスタイルを適用したい場合に使用します。
例: p { color: blue; }
段落1
段落2
クラスセレクタ（Class Selector）
.クラス名
クラスセレクタは、指定したクラス名を持つすべての要素を選択します。クラス名は複数の要素に適用でき、再利用可能なスタイルを定義する際に最もよく使用されるセレクタです。
例: .highlight { background: yellow; }
強調
通常
IDセレクタ（ID Selector）
#ID名
IDセレクタは、指定したID属性を持つ要素を選択します。IDは1つのドキュメント内で1つの要素にのみ使用できるため、特定の要素にスタイルを適用する際に使用します。ただし、再利用性が低いため、クラスセレクタの使用が推奨される場合が多いです。
例: #header { background: blue; }
全称セレクタ（Universal Selector）
*
全称セレクタは、すべての要素を選択します。リセットCSSや、すべての要素に共通のスタイルを適用する際に使用します。ただし、パフォーマンスへの影響を考慮して、必要最小限の使用が推奨されます。
例: * { margin: 0; padding: 0; }
段落
span
🏷️ 属性セレクタ
[属性] – 属性の存在
[属性名]
指定した属性が存在する要素を選択します。属性の値は問いません。フォーム要素や、特定の属性を持つ要素を選択する際に便利です。
例: [disabled] { opacity: 0.5; }
[属性="値"] – 完全一致
[属性名="値"]
指定した属性が、指定した値と完全に一致する要素を選択します。大文字小文字は区別されます。
例: [type="submit"] { background: green; }
[属性~="値"] – 単語一致
[属性名~="値"]
指定した属性の値が、空白で区切られた単語のリストで、その中に指定した値が含まれる要素を選択します。クラス属性などで複数のクラスを持つ要素を選択する際に便利です。
例: [class~="btn"] { padding: 10px; }
[属性|="値"] – 接頭辞一致
[属性名|="値"]
指定した属性の値が、指定した値と完全に一致するか、その値に続いてハイフン（-）がある要素を選択します。言語コード（lang属性）などで使用されます。
例: [lang|="en"] { font-family: Arial; }
English
English US
日本語
[属性^="値"] – 接頭辞一致（部分）
[属性名^="値"]
指定した属性の値が、指定した値で始まる要素を選択します。URLやIDなど、特定のパターンで始まる値を選択する際に便利です。
[属性$="値"] – 接尾辞一致
[属性名$="値"]
指定した属性の値が、指定した値で終わる要素を選択します。ファイル拡張子や、特定のパターンで終わる値を選択する際に便利です。
[属性*="値"] – 部分一致
[属性名*="値"]
指定した属性の値が、指定した値を含む要素を選択します。最も柔軟な属性セレクタで、値のどこかに特定の文字列が含まれる要素を選択できます。
例: [class*="error"] { border: 2px solid red; }
🔗 結合子（Combinators）
子孫結合子（Descendant Combinator）
親要素 子要素
親要素の子孫（直接の子だけでなく、孫やそれ以降も含む）である要素を選択します。スペースで区切って記述します。最もよく使用される結合子の一つです。
例: div p { color: blue; }
選択される
選択される
選択されない
子結合子（Child Combinator）
親要素 > 子要素
親要素の直接の子要素のみを選択します。孫要素は選択されません。より具体的な選択が可能で、意図しない要素へのスタイル適用を防げます。
例: div > p { color: blue; }
選択される
選択されない
隣接兄弟結合子（Adjacent Sibling Combinator）
要素1 + 要素2
要素1の直後に続く兄弟要素（要素2）を選択します。要素1と要素2は同じ親要素の子で、要素2が要素1の直後に配置されている必要があります。
例: h2 + p { margin-top: 0; }
見出し
選択される
選択されない
一般兄弟結合子（General Sibling Combinator）
要素1 ~ 要素2
要素1の後に続くすべての兄弟要素（要素2）を選択します。隣接兄弟結合子と異なり、直接隣接している必要はありません。同じ親要素の子で、要素1の後に配置されているすべての要素2が選択されます。
例: h2 ~ p { color: blue; }
見出し
選択される
選択される
🎭 疑似クラス（Pseudo-classes）
:hover – ホバー状態
:hover
ユーザーがマウスを要素の上に置いた（ホバーした）状態の要素を選択します。インタラクティブなUIを作成する際に最もよく使用される疑似クラスです。
例: a:hover { color: red; }
:active – アクティブ状態
:active
ユーザーが要素をクリック（またはタップ）している間の状態を選択します。ボタンやリンクをクリックした瞬間のフィードバックを提供する際に使用します。
例: button:active { transform: scale(0.95); }
:focus – フォーカス状態
:focus
要素がフォーカスを受けている状態を選択します。キーボードナビゲーションやフォーム入力時に、どの要素がアクティブかを示す際に使用します。アクセシビリティの観点からも重要です。
例: input:focus { border: 2px solid blue; }
:first-child – 最初の子要素
:first-child
親要素の最初の子要素を選択します。リストの最初の項目や、コンテナの最初の要素に特別なスタイルを適用する際に使用します。
例: li:first-child { font-weight: bold; }
- 最初
- 2番目
- 3番目
:last-child – 最後の子要素
:last-child
親要素の最後の子要素を選択します。リストの最後の項目や、コンテナの最後の要素に特別なスタイルを適用する際に使用します。
例: li:last-child { border-bottom: none; }
- 1番目
- 2番目
- 最後
:nth-child(n) – n番目の子要素
:nth-child(n)
親要素のn番目の子要素を選択します。nには数値、キーワード（odd, even）、または式（2n, 2n+1など）を指定できます。非常に強力で柔軟なセレクタです。
例: li:nth-child(2) { color: blue; }
- 1番目
- 2番目
- 3番目
- 4番目
例: li:nth-child(odd) { background: lightgray; }
- 1番目（odd）
- 2番目
- 3番目（odd）
- 4番目
例: li:nth-child(2n) { color: green; }
- 1番目
- 2番目（2n）
- 3番目
- 4番目（2n）
:nth-of-type(n) – 同じ種類のn番目
:nth-of-type(n)
同じ要素タイプの中で、n番目の要素を選択します。:nth-childと異なり、他の種類の要素は無視されます。特定の種類の要素のみを対象にしたい場合に便利です。
例: p:nth-of-type(2) { color: blue; }
1番目のp
2番目のp
:not() – 否定セレクタ
:not(セレクタ)
指定したセレクタに一致しない要素を選択します。特定の要素を除外したい場合に使用します。複数のセレクタを指定することもできます（:not(セレクタ1, セレクタ2)）。
例: p:not(.special) { color: blue; }
通常の段落
特別な段落
通常の段落
:checked – チェック状態
:checked
チェックボックスやラジオボタンがチェックされている状態を選択します。フォームのカスタマイズや、チェック状態に応じたスタイル変更に使用します。
例: input:checked + label { color: green; }
:disabled – 無効状態
:disabled
無効化されているフォーム要素を選択します。ユーザーが操作できない要素に視覚的なフィードバックを提供する際に使用します。
例: input:disabled { opacity: 0.5; }
:empty – 空要素
:empty
子要素やテキストノードを持たない空の要素を選択します。空のコンテナを非表示にしたり、特別なスタイルを適用する際に使用します。
例: div:empty { display: none; }
✨ 疑似要素（Pseudo-elements）
::before – 前の疑似要素
::before
要素の内容の前に、装飾的なコンテンツを挿入します。contentプロパティが必須です。アイコンや装飾を追加する際によく使用されます。
例: p::before { content: “★ “; }
この段落の前に星が追加されます
::after – 後の疑似要素
::after
要素の内容の後に、装飾的なコンテンツを挿入します。contentプロパティが必須です。アイコンや装飾を追加する際によく使用されます。
例: a::after { content: " →"; }
::first-line – 最初の行
::first-line
要素の最初の行にスタイルを適用します。ブロック要素にのみ適用されます。段落の最初の行を強調する際に使用します。
例: p::first-line { font-weight: bold; }
この段落の最初の行だけが太字になります。残りの行は通常の太さです。複数行のテキストで確認できます。
::first-letter – 最初の文字
::first-letter
要素の最初の文字にスタイルを適用します。ブロック要素にのみ適用されます。ドロップキャップ（段落の最初の大きな文字）を作成する際に使用します。
例: p::first-letter { font-size: 3em; float: left; }
この段落の最初の文字だけが大きく表示されます。ドロップキャップの効果を確認できます。
::selection – 選択部分
::selection
ユーザーが選択したテキスト部分にスタイルを適用します。テキストの選択時の見た目をカスタマイズする際に使用します。
例: ::selection { background: yellow; color: black; }
このテキストを選択してみてください。選択部分の背景色と文字色が変わります。
::placeholder – プレースホルダー
::placeholder
入力フィールドのプレースホルダーテキストにスタイルを適用します。フォームのユーザビリティを向上させる際に使用します。
例: input::placeholder { color: gray; }
🚀 最新セレクタ（Modern Selectors）
:is() – セレクタリストの一致
:is(セレクタ1, セレクタ2, ...)
指定したセレクタリストのいずれかに一致する要素を選択します。複数のセレクタを簡潔に記述できるため、コードの可読性が向上します。以前は:matches()や:any()という名前でした。
例: :is(h1, h2, h3) { color: blue; }
見出し1
見出し2
見出し3
段落
💡 メリット：従来のh1, h2, h3 { color: blue; }と同等ですが、:is()を使用することで、セレクタ全体の特異性が最も低いセレクタの特異性になります。これにより、より柔軟なスタイルの上書きが可能です。
:where() – 特異性を0にする
:where(セレクタ1, セレクタ2, ...)
:is()と同様にセレクタリストのいずれかに一致する要素を選択しますが、特異性が常に0になります。これにより、後から簡単に上書きできるスタイルを定義できます。
例: :where(h1, h2) { margin: 0; }
見出し1（特異性0）
見出し2（特異性0）
💡 使用例：リセットCSSや、後から簡単に上書きしたいデフォルトスタイルを定義する際に便利です。特異性の競合を避けることができます。
:has() – 親セレクタ
:has(セレクタ)
指定したセレクタに一致する子要素（または子孫要素）を持つ親要素を選択します。これまで不可能だった「親要素の選択」を可能にする、非常に強力なセレクタです。
例: div:has(> img) { border: 2px solid blue; }
💡 実用例：画像を含むカードに特別なスタイルを適用したり、エラーメッセージを含むフォームにスタイルを適用したりできます。JavaScriptを使わずに、より複雑な条件に基づいたスタイリングが可能になります。
⚠️ ブラウザ対応：比較的新しいセレクタのため、古いブラウザでは対応していない場合があります。2023年以降の主要ブラウザでは対応済みです。
:not() の拡張 – 複数セレクタの否定
:not(セレクタ1, セレクタ2, ...)
複数のセレクタを指定して、それらすべてに一致しない要素を選択します。以前は1つのセレクタのみ指定できましたが、最新仕様では複数のセレクタを指定できます。
例: p:not(.special, .important) { color: gray; }
通常の段落
特別な段落
重要な段落
通常の段落
💡 実践例
カードレイアウトのスタイリング
セレクタを組み合わせて、カードレイアウトに様々なスタイルを適用する例です。最初のカード、最後のカード、画像を含むカードなど、条件に応じたスタイリングが可能です。
カード1
最初のカード
カード2
通常のカード
カード3
最後のカード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .card:first-child{ border-top-left-radius:10px; border-top-right-radius:10px; } .card:last-child{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .card:nth-child(even){ background:#f8fafc; } .card:has(img){ border:2pxsolid#6366f1; } |
フォームのバリデーションスタイル
フォーム要素の状態に応じて、適切なスタイルを適用する例です。無効な入力、必須フィールド、フォーカス状態など、様々な状態を視覚的に表現します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | input:required{ border-left:3pxsolid#ef4444; } input:focus:valid{ border-color:#10b981; } input:focus:invalid{ border-color:#ef4444; } input:disabled{ opacity:0.5; cursor:not-allowed; } |
ナビゲーションメニューのスタイリング
ナビゲーションメニューに、ホバー効果、アクティブ状態、最初と最後の項目の特別なスタイルを適用する例です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .nav-link:first-child{ border-top-left-radius:5px; border-bottom-left-radius:5px; } .nav-link:last-child{ border-top-right-radius:5px; border-bottom-right-radius:5px; } .nav-link:hover{ background:#6366f1; color:white; } .nav-link.active{ background:#4f46e5; color:white; } |
テーブルの交互行スタイリング
テーブルの行を交互に色分けし、ホバー効果を追加する例です。可読性とユーザビリティを向上させます。
| 項目1 | データ1 |
| 項目2 | データ2 |
| 項目3 | データ3 |
| 項目4 | データ4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | tr:nth-child(even){ background:#f8fafc; } tr:hover{ background:#e0e7ff; cursor:pointer; } tr:first-child{ background:#6366f1; color:white; font-weight:bold; } |