疑似クラスと疑似要素

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

次に取り上げるセレクターのセットは、疑似クラス疑似要素と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。

前提条件: 基本的なコンピュータリテラシー、インストールされている基本的なソフトウェア、ファイルの操作に関する基本的な知識、HTMLの基本(HTMLの概要を学ぶ)、CSSのしくみ(CSSの最初のステップを学ぶ)。
目的: 疑似クラスおよび疑似要素セレクターについて学習します。

疑似クラスとは何ですか?

疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。

疑似クラスは、コロンで始まるキーワードです。

:疑似クラス名

単純な疑似クラスの例

簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスにCSSを追加できます。

ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか?クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、:first-child 疑似クラスセレクターを使用できます。これにより、常に記事の最初の子要素がターゲットになり、HTMLを編集する必要がなくなります(これは、CMSによって生成された可能性があるため、とにかく常に可能であるとは限りません。)

すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。

ユーザーアクション疑似クラス

一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらのユーザーアクションの疑似クラスは、動的疑似クラスと呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。

  • :hover — 上記の通り; これは、ユーザーが要素(通常はリンク)の上にポインターを移動した場合にのみ適用されます。
  • :focus — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。

疑似要素とは何ですか?

疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しいHTML要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり :: ます。

::疑似要素名

:一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。

たとえば、段落の最初の行を選択する場合は、それを <span> 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1行にいくつの単語が収まるかわからない傾向があるため(画面の幅やフォントサイズが変わると、単語数が変わるため)、HTMLを追加してこれを確実に行うことは不可能です。

::first-line 擬似要素セレクタは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。

それはまるで最初のフォーマットされた行を <span> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。

これにより、両方の段落の最初の行が選択されていることがわかります。

疑似クラスと疑似要素を組み合わせる

最初の段落の最初の行を太字にしたい場合は :first-child::first-line セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次のCSSを使用するようにしてください。<article>要素内にある最初の <p> 要素の最初の行を選択したいと言っています。

 article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

:: beforeおよび:: afterを使用したコンテンツの生成

CSSを使用してコンテンツをドキュメントに挿入するための content プロパティと共に使用される特別な疑似要素がいくつかあります。

以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。content プロパティのテキスト値を変更してみて、出力でそれを確認してください。 ::before 疑似要素を ::after に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。

CSSからテキストの文字列を挿入することは、実際にはWebで頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。

これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。

これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。

次の例では、 ::before 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを display: block に設定しました。次に、CSSを使用して、他の要素と同じようにスタイルを設定します。CSSをいじって、CSSの外観と動作を変更できます。

content プロパティとともに ::before::after 擬似要素を使用することは、CSSでは「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、CSS Arrow Please Pleaseのサイトで、CSSで矢印を生成するのに役立ちます。矢印を作成するときにCSSを見ると、::before および ::after 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、content プロパティを見て、ドキュメントに何が追加されているかを確認してください。

参照セクション

疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDNのリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。

疑似クラス

セレクタ 説明
:active ユーザーが要素をアクティブ化(たとえばクリック)すると一致します。
:any-link リンクの :link:visited 状態の両方に一致します。
:blank 入力値が空の<input> 要素に一致します。
:checked 選択状態のラジオボタンまたはチェックボックスに一致します。
:current 現在表示されている要素または要素の祖先と一致します。
:default 類似要素のセットの中でデフォルトである1つ以上のUI要素に一致します。
:dir 方向性(HTML dir 属性またはCSS direction プロパティの値)に基づいて要素を選択します。
:disabled 無効な状態のユーザーインターフェイス要素に一致します。
:empty オプションの空白以外の子を持たない要素に一致します。
:enabled 有効な状態のユーザーインターフェイス要素に一致します。
:first ページ媒体では、最初のページと一致します。
:first-child 兄弟の中で最初にある要素に一致します。
:first-of-type 兄弟の中で最初にある特定のタイプの要素に一致します。
:focus 要素にフォーカスがあるときに一致します。
:focus-visible 要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。
:focus-within フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。
:future 現在の要素の後の要素に一致します。
:hover ユーザーが要素にカーソルを合わせると一致します。
:indeterminate 値が不確定な状態のUI要素、通常はチェックボックスに一致します
:in-range 範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。
:invalid 無効な状態の <input> のような要素に一致します。
:lang 言語(HTML lang属性の値)に基づいて要素を照合します。
:last-child 兄弟の中で最後にある要素に一致します。
:last-of-type 兄弟の中で最後にある特定のタイプの要素に一致します。
:left ページ媒体では、左側のページと一致します。
:link 未訪問のリンクに一致します。
:local-link 現在のドキュメントと同じサイトにあるページを指すリンクに一致します。
:is() 渡されたセレクターリスト内の任意のセレクターに一致します。
:not このセレクターに値として渡されるセレクターで一致しないものと一致します。
:nth-​​child 兄弟のリストの要素に一致します — 兄弟はan+bの形式の式で一致します(たとえば、2n + 1は1、3、5、7番目などの要素に一致します。すべてが奇数です)。
:nth-​​of-type 特定のタイプの兄弟( <p> 要素など)のリストの要素に一致します — 兄弟は、an+bという形式の式で一致します(たとえば、2n + 1は、その要素のタイプの1、3、5 、7番目などに一致します。すべて奇数です。)
:nth-​​last-child 兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟はan+bの形式の式で一致します(たとえば、2n + 1はシーケンスの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。)
:nth-​​last-of-type 特定のタイプの兄弟のリスト( <p> 要素など)の要素を最後から逆に数えて一致させます。兄弟は、an+bという形式の式で一致します(たとえば、2n + 1は、シーケンス内のそのタイプの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。)
:only-child 兄弟がない要素に一致します。
:only-of-type 兄弟間でそのタイプの唯一の要素である要素に一致します。
:optional 不要なフォーム要素に一致します。
:out-of-range 範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。
:past 現在の要素より前の要素に一致します。
:placeholder-shown プレースホルダーテキストを表示しているinput要素に一致します。
:playing 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。
:paused 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。
:read-only ユーザーが変更できない要素と一致します。
:read-write ユーザーが変更可能な要素と一致します。
:required 必要なフォーム要素に一致します。
:right ページ媒体では、右側のページに一致します。
:root ドキュメントのルートである要素に一致します。
:scope スコープ要素であるすべての要素に一致します。
:valid <input> 要素などで要素が有効な状態のときに一致します。
:target 現在のURLのターゲットである場合(つまり、現在のURLフラグメントに一致するIDを持つ場合)、要素に一致します
:visited 訪問したリンクに一致します。

疑似要素

セレクタ 説明
::after 元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。
::before 元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。
::first-letter 要素の最初の文字と一致します。
::first-line 含まれている要素の最初の行と一致します。
::grammar-error ブラウザによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。
::marker 通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。
::selection 選択されたドキュメントの部分に一致します。
::spelling-error ブラウザによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。

このモジュールでは

  1. カスケードと継承
  2. CSSセレクター
  3. ボックスモデル
  4. 背景と枠線
  5. 異なるテキスト方向の処理
  6. あふれるコンテンツ
  7. 値と単位
  8. CSSでのアイテムのサイズ変更
  9. 画像、メディア、フォーム要素
  10. スタイリングテーブル
  11. CSSのデバッグ
  12. CSSの整理