CSS 入門

CSS 擬似クラスセレクター

CSS 擬似クラス（Pseudo-classes）は、要素の特定の状態や位置を選択するためのキーワードです。これらを使用することで、HTMLに新しいクラスやIDを追加することなく、既存の要素に特殊なエフェクトを適用できます。

擬似クラスを活用すれば、ユーザーのインタラクション（マウスホバーなど）、ドキュメントツリー内での要素の位置（最初の親要素など）、あるいは特定の属性（訪問済みのリンクなど）に基づいてスタイルを適用でき、CSSの選択能力と柔軟性が飛躍的に向上します。

1. 擬似クラスとは何か？

擬似クラスはコロン（:）で始まり、セレクターの後ろに付与されます。これは、要素の特殊な「状態」や「位置」を指定するために使用されます。タグ名、クラス、IDといったドキュメント構造に基づくだけでなく、その瞬間のコンテキスト（状況）に応じてスタイルを適用できるのが特徴です。インタラクティブで動的なWebページを作成する上で、擬似クラスの理解は不可欠です。

1.1 擬似クラスの役割

  • ユーザーインタラクションへの応答： 例えば、ユーザーがリンクにマウスを乗せたときに色を変える。
  • 要素の状態に基づく： フォームの入力フィールドが有効、無効、またはチェックされているかに応じてスタイルを変更する。
  • 要素の位置に基づく： リストの最初や最後の項目を選択したり、特定のタイプの「n番目」の子要素を選択したりする。
  • ドキュメント構造に基づく： リンクの訪問済み・未訪問状態にスタイルを適用する。

2. 常用擬似クラスの分類と例

CSS擬似クラスは、その機能によっていくつかのカテゴリーに分類できます。

2.1 動的擬似クラス

ユーザーによる要素への操作に反応する擬似クラスです。

  • :link

       説明： 未訪問のすべての <a> 要素を選択します。

a:link {
    color: blue;
}
  • :visited

       説明： 訪問済みのすべての <a> 要素を選択します。プライバシー保護のため、変更できる属性は厳しく制限されています（通常は color のみ）。

a:visited {
    color: purple;
}
  • :hover

       説明： マウスポインターが要素の上にある状態を選択します。

button:hover {
    background-color: lightgray;
}
  • :active

       説明： ユーザーによってアクティブ化されている（例：クリックしている最中）要素を選択します。

button:active {
    background-color: darkgray;
    transform: translateY(1px);
}
  • :focus

       説明： 現在フォーカスが当たっている要素（通常はフォーム要素やリンク）を選択します。

input:focus {
    border: 2px solid blue;
    outline: none; /* ブラウザデフォルトのフォーカス枠を削除 */
}

注意： 動的擬似クラスの記述順序は重要です。すべての状態を正しく適用させるために、通常は LVHA順（Link, Visited, Hover, Active）に従います。

2.2 UI要素状態擬似クラス (UI Element States Pseudo-classes)

特定のUI状態にある要素を選択します。主にフォーム要素で使用されます。

  • :enabled：有効化されているすべてのフォーム要素を選択。
  • :disabled：無効化されているすべてのフォーム要素を選択。
  • :checked：チェックされている radio、checkbox、または option 要素を選択。
  • :read-only：readonly 属性が設定された入力フィールドを選択。
  • :read-write：ユーザーが編集可能な入力フィールドを選択。
  • :valid / :invalid：バリデーション（検証）を通過した、または通過していない input や form 要素を選択。

2.3 構造擬似クラス (Structural Pseudo-classes)

ドキュメントツリー内での位置に基づいて要素を選択します。

  • :first-child / :last-child：親要素内の最初、または最後の子要素を選択。
  • :nth-child(n)：親要素内のn番目の子要素を選択。n には数値、キーワード（even：偶数, odd：奇数）、または数式（An+B）が指定可能です。
  • :first-of-type / :last-of-type：同じタイプ（タグ名）の中で最初、または最後の子要素を選択。
  • :only-child：親要素にとって唯一の子要素である場合に選択。
  • :empty：子要素（テキストノードを含む）を一切持たない要素を選択。
  • :root：ドキュメントのルート要素（通常は <html>）を選択。CSS変数の定義によく使われます。
  • :not(selector)：括弧内のセレクターに一致しない要素を選択（否定擬似クラス）。
  • :has(selector)：特定の要素を内部に保持している要素を選択（CSSセレクターレベル4）。
  • :is(selector-list) / :where(selector-list)：複数のセレクターのいずれかに一致する要素を選択。:where は詳細度（Specificity）が0になります。

2.4 言語擬似クラス

  • :lang(language)：lang 属性が指定した言語に設定されている要素を選択します。
p:lang(ja) {
    font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}

2.5 時間軸擬似クラス

メディア要素（ビデオやオーディオ）の再生状態に関連します。

  • :playing：現在再生中のメディア要素を選択。
  • :paused：一時停止中のメディア要素を選択。

3. ベストプラクティスと注意事項

  • LVHA順の遵守： リンク関連の擬似クラス（:link, :visited, :hover, :active）はこの順序で記述してください。:active は :hover の後に置く必要があります。
  • アクセシビリティ（Accessibility）： :focus 擬似クラスを使用して、明確なフォーカスインジケーターを提供してください。これはキーボードユーザーにとって極めて重要です。デフォルトの outline を消す場合は、必ず代替の視覚的スタイルを提供しましょう。
  • パフォーマンスの考慮： 大規模なドキュメントにおいて、複雑な数式を用いた :nth-child などはパフォーマンスに僅かな影響を与える可能性がありますが、現代のブラウザではほとんどの場合問題になりません。
  • ブラウザ互換性： :has、:where、:is などの新しい擬似クラスは、古いブラウザではサポートされていない場合があります。プロジェクトの対象ブラウザを確認してください。
  • 詳細度（Specificity）： 擬似クラスの詳細度は、通常のクラスセレクター（.class）と同じです。スタイルの競合を解決する際は、カスケードのルールを理解しておくことが重要です。
  • :not() の制限： :not() は単純なセレクターのみを否定でき、複雑なセレクターのリストや別の :not() を入れ子にすることはできません。

擬似クラスを熟練させることで、より動的でインタラクティブ、かつメンテナンス性の高いWebインターフェースを構築できるようになります。これらはCSSの強力な選択能力の核心であり、要素のあらゆる条件に対して細かい制御を可能にします。