CSS 擬似クラス子要素
説明
この記事では、CSS において、要素の特定の子要素を選択するために使用される擬似クラスについて詳しく解説します。構造擬似クラスと動的擬似クラスについて、それぞれの構文、用途、例、ブラウザの互換性について説明し、これらの強力なセレクタをより深く理解し、活用できるようにします。
副題
1. CSS 擬似クラスとは？
擬似クラスは、:hover（マウスオーバー時の状態）など、特定の状態にある要素を選択するために使用されます。擬似クラスはコロン (:) で始まり、要素セレクタ、クラスセレクタ、ID セレクタなどと組み合わせて使用できます。
2. 構造擬似クラス
定義: 構造擬似クラスは、DOM ツリー内の位置など、ドキュメント構造に基づいて要素を選択します。
2.1. 主な構造擬似クラス:
| 擬似クラス | 説明 |
|---|---|
:first-child |
親要素の最初の子要素を選択します。 |
:last-child |
親要素の最後の子要素を選択します。 |
:nth-child(n) |
親要素の n 番目の要素を選択します。n は数値、キーワード、または式です。 |
:nth-last-child(n) |
最後の子要素から逆順に数えて n 番目の要素を選択します。 |
:first-of-type |
親要素内の指定された型の最初の要素を選択します。 |
:last-of-type |
親要素内の指定された型の最後の要素を選択します。 |
:nth-of-type(n) |
親要素内の指定された型の n 番目の要素を選択します。 |
:nth-last-of-type(n) |
親要素内の指定された型の要素を、最後から数えて n 番目の要素を選択します。 |
:only-child |
親要素の唯一の子要素を選択します。 |
:only-of-type |
親要素内で指定された型の唯一の要素を選択します。 |
:empty |
子要素（テキストノードも含む）を持たない要素を選択します。 |
2.2. 例:
- リストの最初と最後の項目を選択する:
li:first-child,li:last-child - 表の偶数行を選択する:
tr:nth-child(even) - 最初の
<p>要素を選択する:p:first-of-type
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
上記HTMLにおいて、li:first-childは"項目 1"、li:last-childは"項目 3"を選択します。
3. 状態擬似クラス
定義: 状態擬似クラスは、リンクが訪問済みかどうか、フォーム要素が選択されているかどうかなど、要素の現在の状態に基づいて要素を選択します。
3.1. 主な状態擬似クラス:
| 擬似クラス | 説明 |
|---|---|
:link |
未訪問のリンクを選択します。 |
:visited |
訪問済みのリンクを選択します。 |
:hover |
マウスがホバーしている要素を選択します。 |
:active |
アクティブ状態の要素（例：マウスボタンを押している間）を選択します。 |
:focus |
フォーカスされている要素（例：フォーム要素が入力対象になっている状態）を選択します。 |
:target |
現在の URL フラグメント識別子が指す要素を選択します。 |
:enabled |
インタラクション可能な要素（例：無効になっていないボタン）を選択します。 |
:disabled |
インタラクション不可能な要素（例：無効になっているボタン）を選択します。 |
:checked |
選択されているフォーム要素（例：ラジオボタン、チェックボックス）を選択します。 |
:indeterminate |
中間状態のフォーム要素（例：チェックされていないチェックボックス）を選択します。 |
:valid |
検証を通過したフォーム要素を選択します。 |
:invalid |
検証を通過しなかったフォーム要素を選択します。 |
:in-range |
指定された範囲内の値を持つフォーム要素を選択します。 |
:out-of-range |
指定された範囲外の値を持つフォーム要素を選択します。 |
:required |
必須入力のフォーム要素を選択します。 |
:optional |
任意入力のフォーム要素を選択します。 |
:read-only |
読み取り専用のフォーム要素を選択します。 |
:read-write |
読み書き可能なフォーム要素を選択します。 |
3.2. 例:
- リンクのスタイルを変更する:
a:link { color: blue; },a:visited { color: purple; } - ボタンにホバー効果を追加する:
button:hover { background-color: lightgray; } - フォーカスされた入力フィールドのスタイルを設定する:
input:focus { border: 2px solid blue; }
<a href="#">リンク</a>
<button>ボタン</button>
<input type="text" />
4. ブラウザの互換性
CSS 擬似クラスのサポートは、ブラウザやバージョンによって異なります。特に、新しい擬似クラスはサポートが限定的である場合があります。CSS 擬似クラスを使用する際は、Can I use などのリソースを参照して、ブラウザの互換性を確認することをお勧めします。
まとめ
CSS 擬似クラスは、ドキュメント構造や要素の状態に基づいて要素を選択するための強力なセレクタです。擬似クラスを適切に使用することで、コードを簡素化し、開発効率を高め、より豊かなページインタラクションを実現できます。
Q&A
Q1: :nth-child と :nth-of-type の違いは何ですか？
:nth-child(n) は、親要素内の n 番目の要素を選択します。一方、:nth-of-type(n) は、親要素内の指定された型の n 番目の要素を選択します。
Q2: 擬似クラスは複数同時に使用できますか？
はい、擬似クラスは複数同時に使用できます。例えば、a:hover:focus のように、マウスがホバーし、かつフォーカスされているリンクを選択することができます。
Q3: CSS 擬似クラスは JavaScript で操作できますか？
CSS 擬似クラス自体は JavaScript で直接操作することはできませんが、JavaScript を使用して要素にクラスを追加したり削除したりすることで、擬似クラスの適用状態を変更することができます。