css 疑似クラス 一覧

CSS 擬似クラス一覧

説明: CSS 擬似クラスはセレクタに追加されるキーワードで、選択する要素の特定の状態を指定します。マウスホバー、アクセス履歴、フォームコントロールの状態など、ドキュメントツリー以外の情報に基づいて要素のスタイルを設定できます。

:hover 擬似クラス

  • 説明: マウスポインタが要素上に置かれたときにスタイルを適用します。
  • 構文: selector:hover { style properties; }
  • 例: 
    <a href="#">リンク</a>
    a:hover {
  color: red;
}
    この例では、リンクにマウスポインタを合わせると、リンクの色が赤に変わります。

:active 擬似クラス

  • 説明: 要素がアクティブな状態、例えばマウスボタンを押している間などにスタイルを適用します。
  • 説明: ボタンやリンクのインタラクション効果によく利用されます。
  • 構文: selector:active { style properties; }

:focus 擬似クラス

  • 説明: 要素がフォーカスされたときにスタイルを適用します。例えば、ユーザーがクリックして入力フィールドを選択したり、Tabキーで要素に移動したりしたときなどです。
  • 説明: フォーム要素のアクセシビリティとユーザーエクスペリエンスの向上に役立ちます。
  • 構文: selector:focus { style properties; }

:visited 擬似クラス

  • 説明: ユーザーが過去に訪問したことがあるリンクに適用されます。
  • 説明: 訪問済みリンクと未訪問リンクを区別するために使用されます。
  • 構文: selector:visited { style properties; }

:link 擬似クラス

  • 説明: まだ訪問されていないリンクに適用されます。
  • 説明: 通常は :visited 擬似クラスと組み合わせて使用され、リンクのデフォルトスタイルを設定します。
  • 構文: selector:link { style properties; }

動的擬似クラス

  • 説明: このグループの擬似クラスは、ドキュメント内での要素の位置または状態に基づいて要素を選択することができます。
  • 例:
    • :first-child
    • :last-child
    • :nth-child(n)
    • :nth-last-child(n)
    • :only-child
    • :empty
    • :target

ターゲット擬似クラス

  • 説明: :target 擬似クラスは、ID が現在の URL のフラグメント識別子と一致する、一意の要素を選択します。
  • 説明: ページ内ジャンプや特定のコンテンツの強調表示によく使用されます。

UI 要素状態擬似クラス

  • 説明: このグループの擬似クラスは、フォームコントロールやドキュメント内の他のインタラクティブな要素を対象としています。
  • 例:
    • :enabled
    • :disabled
    • :checked
    • :indeterminate

構造擬似クラス

  • 説明: このタイプの擬似クラスは、ドキュメントツリー内での要素の位置に基づいて要素を選択します。
  • 例:
    • :root
    • :nth-of-type(n)
    • :nth-last-of-type(n)
    • :first-of-type
    • :last-of-type
    • :only-of-type

否定擬似クラス

  • 説明: :not(selector) 擬似クラスは、指定されたセレクタ以外のすべての要素を選択できます。
  • 説明: 特定の要素を除外したり、より複雑なスタイル規則を適用したりするために使用できます。

注意: これは、いくつかの一般的な CSS 擬似クラスの簡単な概要です。擬似クラスの完全なリストについては、MDN Web ドキュメント を参照してください。

よくある質問

  1. 質問: :hover 擬似クラスと :focus 擬似クラスの違いは何ですか？
    回答: :hover はマウスポインタが要素上にあるときに適用されますが、:focus はキーボード操作などで要素がフォーカスされたときに適用されます。
  2. 質問: 動的擬似クラスとは何ですか？
    回答: 動的擬似クラスは、ドキュメント内の要素の位置や状態に基づいて要素を選択する擬似クラスです。例えば、:first-child は最初の子要素、:empty は内容のない要素を選択します。
  3. 質問: 否定擬似クラスの使い方を教えてください。
    回答: 否定擬似クラス :not(selector) は、指定されたセレクタ以外のすべての要素を選択します。例えば、p:not(.intro) は、クラス名が "intro" でないすべての <p> 要素を選択します。

その他の参考記事:CSS 疑似クラス