疑似クラス

CSS Podcast - 015: 疑似クラス

たとえば メールアドレスの登録フォームがあるとします 無効なメールアドレスが含まれている場合は、メールのフォームのフィールドに赤い枠線を付けます。 どのようにすればよいでしょうか。 :invalid CSS 疑似クラスを使用できます。 ブラウザが提供する多くの疑似クラスの一つです。

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

疑似要素とは異なり 詳しくは、前のモジュールをご覧ください。 疑似クラスは、要素がどのような状態にあるかを把握します。 その要素の一部のスタイルを設定するのではなく、

インタラクティブ状態

以下の疑似クラスは、ユーザーによるページでのインタラクションによって適用されます。

:hover

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 2. <ph type="x-smartling-placeholder">

ソース

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

:active

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

この状態は、要素がアクティブに操作されているときにトリガーされます。 クリックなどの操作を記録します マウスなどのポインティングデバイスを使うと このステータスは、クリックが開始された時点でまだ解放されていない状態です。

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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1.3。 <ph type="x-smartling-placeholder">

ソース

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

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

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

#content:target {
    background: yellow;
}

これは、特に関連のある領域を目立たせるのに役立ちます。 スキップリンクを介してスキップできます

歴史的州

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

フォーム要素の場合、 <button> などがブラウザによって無効にされている場合、 その状態に接続するには :disabled 疑似クラス。 :enabled 疑似クラスは逆の状態で使用できますが、 フォーム要素もデフォルトでは :enabled ですが、 そのため、この疑似クラスにリーチできない可能性があります。

:checked、:indeterminate

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

:checked 疑似クラスは、サポートするフォーム要素、 チェックボックスやラジオボタンなどの ボタンはオンになっています

:checked 状態はバイナリ（true または false）の状態であり、 ただし、チェックボックスのオン / オフがオフのときは、中間状態になります。 これを特徴量エンジニアリングと :indeterminate の状態。

例として 「すべて選択」オプションがすべてのチェックボックスをオンにすることができます。 ユーザーがいずれかのチェックボックスをオフにした場合 ルートチェックボックスが「すべて」ではなくなるチェックしています。 不確定状態にすべきです

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

:placeholder-shown

対応ブラウザ

  • Chrome: 47。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 51. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

フォーム フィールドに placeholder 属性があり、値なしの場合、 :placeholder-shown 疑似クラスを使用すると、その状態にスタイルを適用できます。 項目にコンテンツが追加されたらすぐに placeholder の有無にかかわらず、 適用されなくなります。

検証状態

対応ブラウザ

  • Chrome: 10. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <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

対応ブラウザ

  • Chrome: 4. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

最初または最後の項目を検索する場合は 使用して、 :first-child、 :last-child。 これらの疑似クラスは、兄弟要素のグループの最初の要素か最後の要素のいずれかを返します。

:only-child

対応ブラウザ

  • Chrome: 2. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1.5 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

兄弟姉妹がない要素も 選択できます 新しい :only-child 疑似クラス。

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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <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

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3.5。 <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

最後に、特定の型の兄弟要素の中で、 :only-of-type。 アイテムが 1 つのみのリストを選択する場合に便利です。 段落内の太字の要素だけを確認したい場合などです。

空の要素を見つける

完全に空の要素を特定すると、 対応する疑似クラスもあります

:empty

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <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()

対応ブラウザ

  • Chrome: 88。 <ph type="x-smartling-placeholder">
  • エッジ: 88。 <ph type="x-smartling-placeholder">
  • Firefox: 78。 <ph type="x-smartling-placeholder">
  • Safari: 14。 <ph type="x-smartling-placeholder">

ソース

.post 要素ですべての子要素 h2、li、img を検索する場合は、次のようにします。 次のようなセレクタリストを作成するとよいでしょう。

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

:is() 次のように、よりコンパクトなバージョンを記述できます。

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

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

:not()

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3.1。 <ph type="x-smartling-placeholder">

ソース

同じ URL で :not() 疑似クラス。 たとえば、class 属性を持たないすべてのリンクのスタイルを設定するために使用できます。

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

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

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

理解度をチェックする

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

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

正しい
セレクタ内で、キー識別文字として 1 個または 2 個の : が使用されている点に注意してください。
False
疑似要素はパーツに、疑似クラスは状態に使用します。

次のうち、関数型疑似クラスはどれですか。

:is()
🎉
:target
機能疑似クラスには、パラメータを受け入れることを示すために、後ろに () が付いています。
:empty
機能疑似クラスには、パラメータを受け入れることを示すために、後ろに () が付いています。
:not()
🎉

次の疑似クラスのうち、ユーザー インタラクションに起因するものはどれですか。

:hover
🎉
:press
もう一度考えてみましょう。
:squeeze
もう一度考えてみましょう。
:target
🎉
:focus-within
🎉

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

:enabled
🎉
:fresh
もう一度考えてみましょう。
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
もう一度考えてみましょう。
:valid
🎉