CSS Podcast - 015: 疑似クラス
たとえば
メールアドレスの登録フォームがあるとします
無効なメールアドレスが含まれている場合は、メールのフォームのフィールドに赤い枠線を付けます。
どのようにすればよいでしょうか。
:invalid
CSS 疑似クラスを使用できます。
ブラウザが提供する多くの疑似クラスの一つです。
疑似クラスを使用すると、状態変化と外部要因に基づいてスタイルを適用できます。 つまり、無効なメールアドレスなどのユーザー入力にデザインで反応できます。 これらについてはセレクタのモジュールで取り上げ、 このモジュールで詳しく説明します
疑似要素とは異なり 詳しくは、前のモジュールをご覧ください。 疑似クラスは、要素がどのような状態にあるかを把握します。 その要素の一部のスタイルを設定するのではなく、
インタラクティブ状態
以下の疑似クラスは、ユーザーによるページでのインタラクションによって適用されます。
:hover
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
ユーザーがマウスやトラックパッドなどのポインティング デバイスを使用している場合、
要素の上に配置することで
その状態に接続するには
:hover
: スタイルを適用します。
これは、要素が操作可能であることを示唆する便利な方法です。
:active
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
この状態は、要素がアクティブに操作されているときにトリガーされます。 クリックなどの操作を記録します マウスなどのポインティングデバイスを使うと このステータスは、クリックが開始された時点でまだ解放されていない状態です。
:focus
、:focus-within
、:focus-visible
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要素がフォーカスを取得できる場合(<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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:target
疑似クラスは、URL フラグメントに一致する id
を持つ要素を選択します。
次のような HTML があるとします。
<article id="content">
…
</article>
URL に #content
が含まれている場合、その要素にスタイルを適用できます。
#content:target {
background: yellow;
}
これは、特に関連のある領域を目立たせるのに役立ちます。 スキップリンクを介してスキップできます
歴史的州
:link
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
: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 {}
フォームの状態
次の疑似クラスでは、フォーム要素を選択できます。 さまざまな状態の変化を再現できます。
:disabled
、:enabled
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
フォーム要素の場合、
<button>
などがブラウザによって無効にされている場合、
その状態に接続するには
:disabled
疑似クラス。
:enabled
疑似クラスは逆の状態で使用できますが、
フォーム要素もデフォルトでは :enabled
ですが、
そのため、この疑似クラスにリーチできない可能性があります。
:checked
、:indeterminate
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
:checked
疑似クラスは、サポートするフォーム要素、
チェックボックスやラジオボタンなどの
ボタンはオンになっています
:checked
状態はバイナリ(true または false)の状態であり、
ただし、チェックボックスのオン / オフがオフのときは、中間状態になります。
これを特徴量エンジニアリングと
:indeterminate
の状態。
例として 「すべて選択」オプションがすべてのチェックボックスをオンにすることができます。 ユーザーがいずれかのチェックボックスをオフにした場合 ルートチェックボックスが「すべて」ではなくなるチェックしています。 不確定状態にすべきです
<progress>
要素には、スタイル設定が可能な不確定状態もあります。
一般的なユースケースでは、ストライプの外観にして、あとどれくらい必要なのかがわからないことを示すというものがあります。
:placeholder-shown
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
フォーム フィールドに placeholder
属性があり、値なしの場合、
:placeholder-shown
疑似クラスを使用すると、その状態にスタイルを適用できます。
項目にコンテンツが追加されたらすぐに
placeholder
の有無にかかわらず、
適用されなくなります。
検証状態
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
HTML フォームの検証には、次のような疑似クラスを使用して応答できます。
:valid
:invalid
、
:in-range
。
:valid
疑似クラスと :invalid
疑似クラスはコンテキスト
照合する必要がある pattern
があるメール フィールドなど、
指定する必要があります
この有効な値の状態は
次の分野に安全に移行できることを理解できます。
:in-range
疑似クラスは、入力に min
と max
がある場合に使用できます。
値がその境界内にあることを表します。
HTML フォームでは
required
属性によって、フィールドが必須であると判断できます。
:required
疑似クラスが必須フィールドで利用可能になります。
必須でないフィールドは、
:optional
疑似クラス。
インデックス、順序、発生回数による要素の選択
ドキュメント内の場所に基づいてアイテムを選択する疑似クラスのグループがあります。
:first-child
、:last-child
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最初または最後の項目を検索する場合は
使用して、
:first-child
、
:last-child
。
これらの疑似クラスは、兄弟要素のグループの最初の要素か最後の要素のいずれかを返します。
:only-child
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
兄弟姉妹がない要素も
選択できます
新しい
:only-child
疑似クラス。
:first-of-type
、:last-of-type
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
[
: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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最初と最後の子と型に制限されません。
:nth-child
と
:nth-of-type
疑似クラスを使用すると、特定のインデックスにある要素を指定できます。
CSS セレクタのインデックス登録は 1 から始まります。
これらの疑似クラスには、インデックス以外にも渡すことができます。
偶数要素をすべて選択する場合は、:nth-child(even)
を使用します。
一定の間隔でアイテムを検索する、より複雑なセレクタを作成することもできます。 An+B マイクロ構文を使用します。
li:nth-child(3n+3) {
background: yellow;
}
このセレクタでは 3 つ目のアイテムが選択され
要件は 3 つめです
この式の n
はインデックスで、
0 から始まる 3(3n
)は、インデックスに乗算する値です。
<li>
アイテムが 7 つあるとします。
3n+3
は (3 * 0) + 3
に変換されるため、最初に選択される項目は 3 です。
次の反復処理では、n
が 1
にインクリメントされたため、項目 6 を選択します。
したがって、(3 * 1) + 3)
となります。
この式は、:nth-child
と :nth-of-type
の両方で機能します。
このタイプのセレクタは、 n 番目の子テスターまたは 数量選択ツールを使用します。
:only-of-type
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
最後に、特定の型の兄弟要素の中で、
:only-of-type
。
アイテムが 1 つのみのリストを選択する場合に便利です。
段落内の太字の要素だけを確認したい場合などです。
空の要素を見つける
完全に空の要素を特定すると、 対応する疑似クラスもあります
:empty
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要素に子がない場合、
: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()
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.post
要素ですべての子要素 h2
、li
、img
を検索する場合は、次のようにします。
次のようなセレクタリストを作成するとよいでしょう。
.post h2,
.post li,
.post img {
…
}
:is()
次のように、よりコンパクトなバージョンを記述できます。
.post :is(h2, li, img) {
…
}
:is
疑似クラスは、セレクタ リストよりもコンパクトであるだけでなく、柔軟性にも優れています。
ほとんどの場合
セレクタリストにエラーやサポートされていないセレクタがある場合
セレクタリスト全体が機能しなくなります
:is
疑似クラスの渡されたセレクタにエラーがある場合、
無効なセレクタは無視されますが、有効なセレクタが使用されます。
:not()
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
同じ URL で
:not()
疑似クラス。
たとえば、class
属性を持たないすべてのリンクのスタイルを設定するために使用できます。
a:not([class]) {
color: blue;
}
:not
疑似クラスは、ユーザー補助機能の改善にも役立ちます。
たとえば、<img>
には、空の値であっても alt
が必要です。
そのため、無効な画像に赤い枠線を追加する CSS ルールを記述できます。
img:not([alt]) {
outline: 10px red;
}
理解度をチェックする
疑似クラスに関する知識をテストする
疑似クラスはクラスが要素に動的に適用されたかのように動作しますが、疑似要素は要素自体に作用します。
次のうち、関数型疑似クラスはどれですか。
:not()
:empty
:is()
:target
次の疑似クラスのうち、ユーザー インタラクションに起因するものはどれですか。
:hover
:target
:squeeze
:press
:focus-within
<form>
状態疑似クラスは次のうちどれですか。
:checked
:indeterminate
:loading
:enabled
:valid
:fresh
:in-range