CSS擬似クラスの一覧

Posted on by

CSSの擬似クラスは、HTML要素に特定の状態を適用するための強力なツールです。
擬似クラスを使用することで、ホバー時のスタイル変更やクリック時の反応、特定の順序や位置に基づくスタイリングなど、さまざまな状態に応じたスタイルを適用できます。
以下では一般的な擬似クラスの一覧とそれらの活用方法について紹介します。

:hover（ホバー）

最もよく使われる擬似クラスであり、要素にカーソルが重なった際のスタイルを指定します。
ボタンやリンクの色を変えたり、画像の透明度を変更したりするのに便利です。

a:hover {
    color: #ff9900;
}

:active（アクティブ）

要素がクリックされた瞬間のスタイルを指定します。
ボタンなどをクリックした際に、押されているようなビジュアルフィードバックを与えるのに使用されます。

button:active {
    background-color: #003366;
    color: white;
}

:focus（フォーカス）

フォーカスが当たった状態、つまりキーボードやタブで要素に移動したときのスタイルを指定します。
フォーム要素に特定のスタイルを適用するのに便利です。

input:focus {
    border-color: #00cc00;
    box-shadow: 0 0 5px #00cc00;
}

:nth-child（n番目の子要素）

特定の順序でn番目の子要素にスタイルを適用します。
奇数番目や偶数番目、特定の位置に要素をスタイリングするのに利用されます。

li:nth-child(odd) {
    background-color: #f2f2f2;
}

:nth-of-type（n番目の同タイプ要素）

特定の順序で同じタイプの要素のうちのn番目の要素にスタイルを適用します。
特定の位置に同じタイプの要素をスタイリングするのに利用されます。

p:nth-of-type(even) {
    font-style: italic;
}

:first-child（最初の子要素）

最初の子要素にスタイルを適用します。
リストなどで最初の項目を特別にスタイリングするのに使用されます。

li:first-child {
    font-weight: bold;
}

:last-child（最後の子要素）

最後の子要素にスタイルを適用します。
リストなどで最後の項目を特別にスタイリングするのに使用されます。

div:last-child {
    border-bottom: 1px solid #ccc;
}

:not（指定以外の要素）

指定した要素以外の要素にスタイルを適用します。
特定の要素だけを除外してスタイリングするのに利用されます。

p:not(.special) {
    color: #666;
}

:checked（チェックされた要素）

チェックボックスやラジオボタンがチェックされた状態のスタイルを指定します。
フォーム要素の状態に基づくスタイリングに使用されます。

input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

:empty（中身が空の要素）

中身が空の要素にスタイルを適用します。
テキストがない場合や、子要素が存在しない場合にスタイリングを行う際に使用されます。

p:empty {
    display: none;
}

:only-child（唯一の子要素）

唯一の子要素にスタイルを適用します。
親要素内に唯一の子要素を特別にスタイリングするのに利用されます。

span:only-child {
    color: #ff0000;
}

:before（要素の前に内容を挿入）

要素の前にコンテンツを挿入します。
装飾要素を追加するために使用されます。

blockquote:before {
    content: "❝";
    font-size: 24px;
}

:after（要素の後に内容を挿入）

要素の後にコンテンツを挿入します。
装飾要素を追加するために使用されます。

a.external:after {
    content: "↗";
}

:is()

指定した複数のセレクタに一致する要素に対してスタイルを適用します。
複雑なセレクタを簡潔にまとめてスタイルを適用する際に便利です。

:is(h1, h2, h3) {
    color: #333;
}

:placeholder-shown

入力フィールドのプレースホルダーテキストが表示されているときにスタイルを適用します。
これにより、ユーザーが入力フォームにフォーカスを当てているかどうかを視覚的に示すことができます。

input:placeholder-shown {
    border: 1px solid #ccc;
}

:target

URL ハッシュ（#）で指定した要素に対してスタイルを適用します。
ページ内リンクなどで特定のセクションにスクロールした際にスタイルを変えるのに役立ちます。

:target {
    background-color: #ffd700;
}

:matches()

指定したセレクタに一致する要素に対してスタイルを適用します。
複数のセレクタをまとめて指定することで、複雑な条件を実現します。

p:matches(.important, .highlight) {
    font-weight: bold;
    color: #e60000;
}

:in-rangeと:out-of-range

:in-range 擬似クラスは、数値入力欄内の有効範囲の値に適用されます。
:out-of-range 擬似クラスは、無効な値が入力された場合に適用されます。
フォームバリデーション時に視覚的なフィードバックを提供します。

input[type="number"]:in-range {
    border: 1px solid #4caf50;
}

input[type="number"]:out-of-range {
    border: 1px solid #e53935;
}
16. :read-only と :read-write 擬似クラス
:read-only 擬似クラスは、読み取り専用フィールドに対してスタイルを適用します。:read-write 擬似クラスは、編集可能なフィールドに対してスタイルを適用します。フォームのフィールドのステータスに合わせたスタイリングを行う際に利用します。

css
Copy code
input:read-only {
    background-color: #f9f9f9;
}

input:read-write {
    background-color: white;
}

:read-only と :read-write

:read-only 擬似クラスは、読み取り専用フィールドに対してスタイルを適用します。
:read-write 擬似クラスは、編集可能なフィールドに対してスタイルを適用します。
フォームのフィールドのステータスに合わせたスタイリングを行う際に利用します。

input:read-only {
    background-color: #f9f9f9;
}

input:read-write {
    background-color: white;
}

まとめ

これらの擬似クラスを理解し、上手に活用することで、魅力的でユーザーフレンドリーなウェブサイトやアプリケーションを作成できるでしょう。