フロントエンドエンジニアが覚えておくべきCSSのセレクタと関連技術をまとめます。以下のリストには、基本セレクタ、疑似クラス、疑似要素、属性セレクタ、関係セレクタ、および複雑なセレクタを含みます。
CSSセレクタ完全リスト
1. 基本セレクタ
| セレクタ | 説明 | 例 |
|---|
| 要素セレクタ | 特定のHTML要素を選択 | p { color: red; } |
| クラスセレクタ | クラス属性を持つ要素を選択 | .button { color: blue; } |
| IDセレクタ | ID属性を持つ要素を選択 | #header { font-size: 18px; } |
| ユニバーサルセレクタ | すべての要素を選択 | * { margin: 0; } |
2. 関係性セレクタ
| セレクタ | 説明 | 例 |
|---|
| 子孫セレクタ | 親要素内のすべての子孫要素を選択 | div p { color: green; } |
子セレクタ（>） | 直下の子要素のみを選択 | div > p { font-size: 14px; } |
| 隣接兄弟セレクタ | 隣接する兄弟要素を選択 | h2 + p { margin-top: 0; } |
| 一般兄弟セレクタ | 同じ親要素内の兄弟要素を選択 | h2 ~ p { color: gray; } |
3. 属性セレクタ
| セレクタ | 説明 | 例 |
|---|
| 属性が一致する要素 | 特定の属性を持つ要素を選択 | input[type="text"] { ... } |
部分一致（*=） | 属性値が部分的に一致する要素を選択 | a[href*="example"] { ... } |
前方一致（^=） | 属性値が前方一致する要素を選択 | img[src^="images/"] { ... } |
後方一致（$=） | 属性値が後方一致する要素を選択 | img[src$=".png"] { ... } |
属性値の存在（~=） | 属性値が単語として含まれる要素を選択 | [class~="button"] { ... } |
4. 疑似クラス
| セレクタ | 説明 | 例 |
|---|
| :hover | ホバー状態の要素を選択 | a:hover { color: red; } |
| :active | クリック中の要素を選択 | button:active { background: gray; } |
| :focus | フォーカスされた要素を選択 | input:focus { outline: blue; } |
| :first-child | 親要素の最初の子要素を選択 | li:first-child { font-weight: bold; } |
| :last-child | 親要素の最後の子要素を選択 | li:last-child { color: red; } |
| :nth-child() | 特定の順番の子要素を選択 | li:nth-child(2) { color: green; } |
| :nth-of-type() | 特定のタイプの順番要素を選択 | p:nth-of-type(1) { font-size: 20px; } |
| :not() | 特定の要素以外を選択 | p:not(.highlight) { color: gray; } |
| :empty | 空の要素を選択 | div:empty { border: 1px dashed red; } |
| :has() | 親要素が特定の子要素を持つか判定 | .card:has(p) |
| :is() | 複数のセレクター指定（OR 条件） | :is(h1, h2, h3) |
| :where() | 優先度ゼロのセレクター | :where(h1, h2) |
5. 疑似要素
| セレクタ | 説明 | 例 |
|---|
| ::before | 要素の前にコンテンツを挿入 | p::before { content: "●"; color: red; } |
| ::after | 要素の後にコンテンツを挿入 | p::after { content: "★"; } |
| ::first-line | 最初の行にスタイルを適用 | p::first-line { font-weight: bold; } |
| ::first-letter | 最初の文字にスタイルを適用 | p::first-letter { font-size: 2em; } |
6. 高度なセレクタ
| セレクタ | 説明 | 例 |
|---|
| 複数セレクタ | 複数の要素をまとめて選択 | h1, h2, h3 { color: navy; } |
| 結合セレクタ | 条件に合致する要素の絞り込み | div.highlight p { font-size: 14px; } |
| 詳細度の調整 | !importantでスタイルの優先順位を変更 | p { color: red !important; } |
7. 便利なショートハンドと特殊セレクタ
| セレクタ | 説明 | 例 |
|---|
| :checked | チェックボックスのチェック状態を選択 | input:checked { box-shadow: 0 0 5px blue; } |
| :required | 必須項目のスタイル適用 | input:required { border: 2px solid red; } |
| :disabled | 非活性状態の要素を選択 | button:disabled { opacity: 0.5; } |
| :root | ルート要素（html）を選択 | :root { --main-color: blue; } |
| ::selection | 選択したテキストのスタイルを適用 | ::selection { background: yellow; } |
8. メディアクエリとレスポンシブ
| セレクタ・ルール | 説明 | 例 |
|---|
| メディアクエリ | 画面サイズに応じたスタイル適用 | @media (max-width: 768px) { ... } |
min-width条件 | 最小幅の条件指定 | @media (min-width: 1024px) { ... } |
orientation（向き） | 画面の向きによってスタイル変更 | @media (orientation: portrait) { ... } |
9. :root（カスタムプロパティ）
| セレクタ・ルール | 説明 | 例 |
|---|
:root | CSS変数を定義する | :root { --main-color: #3498db; } |
var(--変数名) | 変数を適用する | color: var(--main-color); |
📌 :root の活用例
1. 基本的なCSS変数の定義と適用
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size-base);
}
まとめ
このリストに含まれるCSSセレクタは、フロントエンドエンジニアが日常的に使うものや、応用的に必要なものを網羅しています。各セレクタの動きを理解し、組み合わせることで、複雑なデザイン要件にも対応できるようになります。