疑似クラス

The CSS Podcast - 015: 疑似クラス

メール登録フォームがあり、無効なメールアドレスが入力されている場合にメール フォームのフィールドに赤い枠線を付けたいとします。方法は次のとおりです。 ブラウザが提供する多くの疑似クラスの 1 つである :invalid CSS 疑似クラスを使用できます。

疑似クラスを使用すると、状態の変化や外部要因に基づいてスタイルを適用できます。つまり、無効なメールアドレスなどのユーザー入力にデザインが反応できるということです。これらについては、セレクタ モジュールで説明しています。このモジュールでは、セレクタについて詳しく説明します。

疑似要素（前のモジュールで詳しく説明）とは異なり、疑似クラスは、要素の一部に一般的なスタイルを適用するのではなく、要素が存在する可能性のある特定の状態にフックします。

インタラクティブな状態

以下の疑似クラスは、ユーザーがページを操作したときに適用されます。

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

ユーザーがマウスやトラックパッドなどのポインティング デバイスを使用して要素の上に置いた場合、:hover を使用してその状態にフックし、スタイルを適用できます。これは、要素を操作できることをユーザーに示すのに便利な方法です。

:active

Browser Support

• 1
• 12
• 1
• 1

Source

この状態は、クリックが解除される前に、要素がアクティブに操作されている（クリックなど）ときにトリガーされます。マウスなどのポインタ デバイスを使用している場合、この状態はクリックが開始され、まだ解放されていない状態です。

:focus、:focus-within、:focus-visible

Browser Support

• 1
• 12
• 1
• 1

Source

要素がフォーカスを受け取れる場合（<button> など）、:focus 疑似クラスを使用してその状態に反応できます。

要素の子要素がフォーカスを受け取った場合に :focus-within で反応することもできます。

フォーカス可能な要素（ボタンなど）は、フォーカスされているときにフォーカスリングが表示されます（クリックした場合も同様です）。このような状況では、デベロッパーは次の CSS を適用します。

button:focus {
    outline: none;
}

この CSS は、要素にフォーカスが当たると既定のブラウザのフォーカス リングを削除します。これにより、キーボードでウェブページを操作するユーザーにとってアクセシビリティの問題が発生します。フォーカス スタイルがない場合、Tab キーを使用してフォーカスが現在どこにあるかを把握できません。:focus-visible を使用すると、要素がキーボード経由でフォーカスを受け取ったときにフォーカス スタイルを表示できます。また、outline: none ルールを使用して、ポインタ デバイスが要素を操作したときにフォーカス スタイルを表示しないようにすることもできます。

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

:target 疑似クラスは、URL フラグメントに一致する id を持つ要素を選択します。次のような HTML があるとします。

<article id="content">
    …
</article>

URL に #content が含まれている場合は、その要素にスタイルを適用できます。

#content:target {
    background: yellow;
}

これは、スキップリンクを介して、ウェブサイトのメイン コンテンツなど、特定のリンク先につながっている可能性のある領域をハイライト表示する場合に便利です。

過去の状態

:link

Browser Support

• 1
• 12
• 1
• 1

Source

:link 疑似クラスは、まだ訪問されていない href 値を持つ <a> 要素に適用できます。

:visited

ユーザーがすでにアクセスしたリンクのスタイルを設定するには、:visited 疑似クラスを使用します。これは :link とは逆の状態ですが、セキュリティ上の理由により使用できる CSS プロパティが少なくなります。スタイル設定できるのは、color、background-color、border-color、outline-color、SVG fill と stroke の色のみです。

順序の重要性

:visited スタイルを定義した場合、少なくとも同等の特定度を持つリンクの疑似クラスでオーバーライドできます。そのため、擬似クラスを使用してリンクにスタイルを設定する場合は、LVHA ルールを使用して、:link、:visited、:hover、:active の順序で指定することをおすすめします。

a:link {}
a:visited {}
a:hover {}
a:active {}

注: セキュリティ上の理由から、変更できるのは :link で定義されたスタイルか、:visited 疑似クラスで定義された未訪問状態のスタイルのみです。変更可能なスタイルを最初に定義することが重要です。LVHA ルールに準拠することで、この問題を解決できます。

フォームの状態

次の疑似クラスを使用すると、フォーム要素を、要素の操作中にその要素が存在する可能性のあるさまざまな状態の中から選択できます。

:disabled、:enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

<button> などのフォーム要素がブラウザによって無効になっている場合は、:disabled 疑似クラスを使用してその状態をフックできます。:enabled 疑似クラスは、反対の状態にも使用できますが、フォーム要素はデフォルトで :enabled であるため、この疑似クラスを使用する必要がない場合があります。

:checked、:indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

:checked 疑似クラスは、チェックボックスやラジオボタンなどのサポート対象のフォーム要素がオンの状態にある場合に使用できます。

:checked 状態はバイナリ（true または false）の状態ですが、チェックボックスはオンでもオフでもない中間状態になります。これは :indeterminate 状態と呼ばれます。

たとえば、グループ内のすべてのチェックボックスをオンにする「すべて選択」コントロールがあります。ユーザーがこれらのチェックボックスのいずれかをオフにすると、ルート チェックボックスは「すべて」がオンになっていることを表さなくなるため、未確定の状態にする必要があります。

<progress> 要素には、スタイル設定可能な未確定状態もあります。一般的なユースケースは、ストライプ表示にして、どれくらい必要か不明であることを示すことです。

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

フォーム フィールドに placeholder 属性があり、値がない場合は、:placeholder-shown 疑似クラスを使用して、その状態にスタイルを適用できます。フィールドにコンテンツが入力されると、placeholder が含まれているかどうかにかかわらず、この状態は適用されなくなります。

検証ステータス

Browser Support

• 10
• 12
• 4
• 5

Source

HTML フォームの検証には、:valid、:invalid、:in-range などの疑似クラスで対応できます。:valid と :invalid の疑似クラスは、有効なフィールドにするために一致させる必要がある pattern を含むメール フィールドなどのコンテキストに便利です。この有効な値の状態をユーザーに表示すると、次のフィールドに安全に移動できることをユーザーに理解させることができます。

:in-range 疑似クラスは、数値入力など、入力に min と max があり、値がその範囲内にある場合に使用できます。

HTML フォームでは、required 属性を使用してフィールドが必須であることを指定できます。必須フィールドには :required 疑似クラスを使用できます。必須ではないフィールドは、:optional 疑似クラスで選択できます。

注: 色（特に赤と緑）のみでステータスの変化を示すのはおすすめしません。色覚異常のあるユーザーや視覚障がいのあるユーザーは、ステータスの変化を認識しづらかったり、完全に見落としたりしてしまう可能性があります。色を使用して状態の変化をサポートし、テキストやアイコンの変更とともに変化を視覚的に示すことをおすすめします。

インデックス、順序、出現回数で要素を選択する

ドキュメント内の位置に基づいてアイテムを選択する疑似クラスのグループがあります。

:first-child、:last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

最初の項目または最後の項目を見つけるには、:first-child と :last-child を使用します。これらの疑似クラスは、兄弟要素のグループ内の最初の要素または最後の要素を返します。

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

:only-child 疑似クラスを使用して、兄弟要素がない要素を選択することもできます。

:first-of-type、:last-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

:first-of-type と :last-of-type を選択できます。これは、:first-child と :last-child と同じように見えるかもしれませんが、次の HTML を検討してください。

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

この CSS も使用します。

.my-parent div:first-child {
    color: red;
}

最初の子要素は div ではなく段落であるため、要素は赤くなりません。このコンテキストでは :first-of-type 疑似クラスが便利です。

.my-parent div:first-of-type {
    color: red;
}

最初の <div> は 2 番目の子要素ですが、.my-parent 要素内の最初の要素であるため、このルールでは赤色になります。

:nth-child、:nth-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

最初の子と最後の子、およびタイプに限定されるわけではありません。:nth-child 擬似クラスと :nth-of-type 擬似クラスを使用すると、特定のインデックスにある要素を指定できます。CSS セレクタのインデックスは 1 から始まります。

これらの疑似クラスには、複数のインデックスを渡すこともできます。偶数の要素をすべて選択する場合は、:nth-child(even) を使用します。

An+B マイクロ構文を使用して、一定の間隔でアイテムを検索するより複雑なセレクタを作成することもできます。

li:nth-child(3n+3) {
    background: yellow;
}

このセレクタは、3 番目の項目から 3 番目ごとに選択します。この式の n はインデックスで、ゼロから始まります。3（3n）は、そのインデックスに掛ける値です。

<li> アイテムが 7 つあるとします。3n+3 は (3 * 0) + 3 に変換されるため、最初に選択される項目は 3 です。次の反復処理では、n が 1（(3 * 1) + 3)）にインクリメントされているため、アイテム 6 が選択されます。この式は :nth-child と :nth-of-type の両方で機能します。

この種のセレクタは、nth-child テスターまたは数量セレクタ ツールで試すことができます。

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

最後に、:only-of-type を使用して、兄弟のグループ内の特定のタイプの要素のみを見つけることができます。これは、項目が 1 つのみを含むリストを選択する場合や、段落内の太字の要素を 1 つだけ検索する場合に便利です。

空の要素の検索

完全に空の要素を特定することが必要な場合もあります。そのための疑似クラスもあります。

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

要素に子要素がない場合、:empty 疑似クラスが適用されます。子要素は HTML 要素やテキストノードだけでなく、空白文字にもなります。次の HTML をデバッグしていて、:empty で動作しない理由がわからない場合は、混乱する可能性があります。

<div>
</div>

これは、開始 <div> と終了 <div> の間に空白文字があるため、空白にすると機能しないからです。

:empty 疑似クラスは、HTML をほとんど制御できず、WYSIWYG コンテンツ エディタなどの空の要素を非表示にする場合に便利です。編集者が、空のパラグラフを追加しています。

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

:empty を使用すると、そのファイルを検索して非表示にできます。

.post :empty {
    display: none;
}

複数の要素の検索と除外

一部の疑似クラスは、よりコンパクトな CSS の記述に役立ちます。

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

.post 要素内の h2、li、img のすべての子要素を検索する場合は、次のようなセレクタリストを書くことができます。

.post h2,
.post li,
.post img {
    …
}

:is() 疑似クラスを使用すると、よりコンパクトなバージョンを記述できます。

.post :is(h2, li, img) {
    …
}

:is 疑似クラスは、セレクタリストよりもコンパクトであるだけでなく、より柔軟性があります。ほとんどの場合、セレクタリストにエラーがあるか、サポートされていないセレクタが含まれていると、セレクタリスト全体が機能しなくなります。:is 疑似クラスで渡されたセレクタにエラーがある場合、無効なセレクタは無視されますが、有効なセレクタは使用されます。

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

:not() 疑似クラスを使用してアイテムを除外することもできます。たとえば、class 属性のないすべてのリンクにスタイルを適用できます。

a:not([class]) {
    color: blue;
}

:not 疑似クラスは、ユーザー補助の改善にも役立ちます。たとえば、<img> には空の値であっても alt が必要です。そのため、無効な画像に太い赤い枠線を追加する CSS ルールを記述できます。

img:not([alt]) {
    outline: 10px red;
}

理解度を確認する

疑似クラスに関する知識をテストする

疑似クラスは、クラスが要素に動的に適用されたかのように動作しますが、疑似要素は要素自体に作用します。

正しい

セレクタでキーの区別文字として単一または二重の : が使用されている点に注意してください。

False

擬似要素は部分用、擬似クラスは状態用です。

次のうち、機能的な疑似クラスはどれですか。

:is()

🎉

:target

関数型の疑似クラスには、パラメータを受け入れることを示す () が付いています。

:empty

関数型の疑似クラスには、パラメータを受け入れることを示す () が付いています。

:not()

🎉

次の疑似クラスのうち、ユーザー操作によるものはどれですか。

:hover

🎉

:press

もう一度考えてみましょう。

:squeeze

もう一度考えてみましょう。

:target

🎉

:focus-within

🎉

次のうち、<form> 状態の疑似クラスはどれですか。

:enabled

🎉

:fresh

もう一度考えてみましょう。

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

もう一度考えてみましょう。

:valid

🎉