CSS ポッドキャスト - 015: 疑似クラス
たとえば、メール登録フォームがあり、メール フォームのフィールドに無効なメールアドレスが含まれている場合に、赤い枠線を付けるとします。その方法を考えましょう。
:invalid CSS 疑似クラスを使用できます。これは、ブラウザが提供する多くの疑似クラスの一つです。
疑似クラスを使用すると、状態の変化と外部要因に基づいてスタイルを適用できます。 つまり、無効なメールアドレスなどのユーザー入力にデザインが反応する可能性があるということです。これらについてはセレクタ モジュールで扱っていますが、このモジュールでは詳細に説明します。
前のモジュールで詳しく説明した疑似要素とは異なり、疑似クラスは、その要素の一般的なスタイル部分ではなく、要素が置かれる特定の状態にフックします。
インタラクティブな状態
ユーザーがページで行った操作により、次の疑似クラスが適用されます。
:hover
ユーザーがマウスやトラックパッドなどのポインティング デバイスを使用していて、それを要素上に配置した場合は、:hover を使用してその状態にフックしてスタイルを適用できます。これは、要素が操作可能であることを示唆するのに便利です。
:active
この状態は、クリックが解放される前に、要素でアクティブに操作（クリックなど）があるとトリガーされます。マウスなどのポインティング デバイスが使用されている場合は、クリックが開始された時点であり、まだ離されていない状態です。
:focus、:focus-within、:focus-visible
要素が（<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
:target 疑似クラスは、URL フラグメントと一致する id を持つ要素を選択します。次のような HTML があるとします。
<article id="content">
…
</article>
URL に #content が含まれている場合、その要素にスタイルを適用できます。
#content:target {
background: yellow;
}
これは、ウェブサイトのメイン コンテンツなど、特定のにリンクされている可能性がある領域を、スキップリンクを使ってハイライト表示する場合に便利です。
歴史上の州
:link
:link 疑似クラスは、まだアクセスされていない href 値を持つすべての <a> 要素に適用できます。
:visited
:visited 疑似クラスを使用すると、ユーザーがすでにアクセスしたリンクのスタイルを設定できます。これは :link の逆の状態ですが、セキュリティ上の理由から使用できる CSS プロパティは少なくなります。スタイルを設定できるのは、color、background-color、border-color、outline-color、および SVG fill および stroke の色のみです。
順序の重要性
:visited スタイルを定義すると、同等以上の特異性を持つリンク疑似クラスでオーバーライドできます。このため、:link、:visited、:hover、:active の順序で疑似クラスを持つリンクのスタイル設定には、LVHA ルールを使用することをおすすめします。
a:link {}
a:visited {}
a:hover {}
a:active {}
フォームの状態
次の疑似クラスでは、フォーム要素が操作中にあり得るさまざまな状態で、フォーム要素を選択できます。
:disabled、:enabled
<button> などのフォーム要素がブラウザによって無効にされている場合は、:disabled 疑似クラスを使用してその状態に接続できます。:enabled 擬似クラスは反対の状態で使用できますが、フォーム要素はデフォルトで :enabled であるため、この擬似クラスに到達しない可能性があります。
:checked、:indeterminate
:checked 疑似クラスは、チェックボックスやラジオボタンなどのサポートするフォーム要素がオン状態の場合に使用できます。
:checked 状態はバイナリ（true または false）状態ですが、チェックボックスのチェックボックスのオン / オフが中間状態となります。この状態は :indeterminate 状態と呼ばれます。
たとえば、「すべて選択」コントロールでグループ内のすべてのチェックボックスをオンにする場合です。 ユーザーがこれらのチェックボックスのいずれかをオフにした場合、ルートのチェックボックスは「すべて」がオンになっていることを反映しなくなるため、不確定な状態にする必要があります。
また、<progress> 要素には、スタイルを設定可能な不確定な状態もあります。一般的なユースケースとしては、どれだけ追加する必要があるかがわからないということを示すためにストライプの外観にします。
:placeholder-shown
フォーム フィールドに placeholder 属性があり、値なしの場合、:placeholder-shown 疑似クラスを使用して、その状態にスタイルを適用できます。placeholder の有無にかかわらず、フィールドにコンテンツがあるとすぐに、この状態は適用されなくなります。
検証の状態
HTML フォームの検証には、:valid、:invalid、:in-range などの疑似クラスを使用して応答できます。:valid 疑似クラスと :invalid 疑似クラスは、pattern を含むメール フィールドを含むコンテキストで、このフィールドを有効なフィールドとして照合する場合に便利です。この有効な値の状態をユーザーに表示することで、次のフィールドに安全に移行できることをユーザーに理解してもらうことができます。
:in-range 疑似クラスは、入力に min と max が含まれていて（数値入力など）、値がこの境界内にある場合に利用できます。
HTML フォームでは、required 属性でフィールドが必須であると判断できます。:required 疑似クラスは、必須フィールドで使用できます。不要なフィールドは、:optional 疑似クラスで選択できます。
インデックス、順序、発生頻度で要素を選択する
ドキュメント内の場所に基づいてアイテムを選択する疑似クラスのグループがあります。
:first-child、:last-child
最初または最後のアイテムを検索する場合は、:first-child と :last-child を使用します。これらの疑似クラスは、兄弟要素のグループ内で最初または最後の要素のいずれかを返します。
:only-child
:only-child 疑似クラスを使用して、兄弟要素のない要素を選択することもできます。
:first-of-type、:last-of-type
: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
最初と最後の子とタイプも制限されません。: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 の両方で機能します。
このタイプのセレクタは、n 番目の子テスターまたは数量セレクタツールで試してみることができます。
:only-of-type
最後に、:only-of-type を使用して、兄弟姉妹のグループから特定のタイプの唯一の要素を検索できます。これは、アイテムが 1 つしかないリストを選択する場合や、段落内で唯一の太字の要素を検索する場合に便利です。
空の要素を見つける
完全に空の要素を特定すると便利な場合があります。そのための擬似クラスもあります。
:empty
要素に子がない場合は、:empty 疑似クラスが適用されます。子は HTML 要素やテキストノードだけでなく、空白文字である場合もあります。そのため、次の HTML をデバッグしているときに、:empty では動作しない理由を疑問に感じる場合があります。
<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()
.post 要素内で h2、li、img の子要素をすべて見つけるには、次のようにセレクタ リストを作成するとします。
.post h2,
.post li,
.post img {
…
}
:is() 疑似クラスを使用すると、よりコンパクトなバージョンを作成できます。
.post :is(h2, li, img) {
…
}
:is 疑似クラスは、セレクタ リストよりもコンパクトであるだけでなく、柔軟性も高くなっています。ほとんどの場合、セレクタ リストにエラーやサポートされていないセレクタがあると、セレクタ リスト全体が機能しなくなります。:is 疑似クラスで渡されたセレクタにエラーがある場合、無効なセレクタは無視されますが、有効なセレクタが使用されます。
:not()
:not() 疑似クラスを使用してアイテムを除外することもできます。たとえば、class 属性を持たないリンクのスタイル設定に使用できます。
a:not([class]) {
color: blue;
}
:not 疑似クラスもユーザー補助機能の改善に役立ちます。たとえば、<img> には、空の値であっても alt が必要です。そのため、無効な画像に濃い赤の枠線を追加する CSS ルールを作成できます。
img:not([alt]) {
outline: 10px red;
}
理解度チェック
疑似クラスの知識をテストする
擬似クラスは、クラスが要素に動的に適用されたかのように動作しますが、擬似要素は要素自体に作用します。
: が使用されていることに注目次のうち、関数疑似クラスはどれですか。
:is():target() が付いています。:empty() が付いています。:not()次のうち、ユーザー操作に起因する擬似クラスはどれですか。
:hover:press:squeeze:target:focus-within<form> 状態の疑似クラスは次のうちどれですか。
:enabled:fresh:indeterminate:checked:in-range:loading:valid