CSS 擬似要素

CSS 擬似要素モジュールは、文書ツリー内には直接存在しない抽象要素を定義します。擬似要素と呼ばれるこれらの抽象要素は、レンダーツリーの一部を表し、選択したりスタイル設定したりすることができます。擬似要素は、文書ツリーによって指定された以上の文書ツリーに関する抽象化をするために使用します。

擬似要素の接頭辞はダブルコロン (::) です。擬似要素をセレクターに追加すると（p::first-line　など）、擬似要素を対象としてスタイル設定することができます。

擬似要素は、 HTML に含まれないものや 余分なマークアップを追加することなく他の方法では対象とすることができないコンテンツの一部を対象とすることができます。 <input> 要素のプレースホルダーについて考えてみましょう。これは抽象要素であり、文書ツリー内の明確なノードではありません。このプレースホルダーを選択するには ::placeholder 擬似要素を用います。別の例として、 ::selection 擬似要素は、ユーザーが現在選択しているコンテンツに一致し、ユーザーがコンテンツを操作して選択を変更したときに一致するものをスタイル設定することができます。同様に、 ::first-line 擬似要素は、要素の最初の行を対象とし、要素の行の長さを問い合わせることなく、最初の行の文字数が変われば自動的に更新されます。

リファレンス

セレクター

この仕様では、 ::details-content および ::search-text 擬似要素、ならびに ::postfix および ::prefix サブ擬似要素も定義しています。これらは、現時点ではどのブラウザーでも対応していません。 ::highlight() 擬似要素は、このモジュールに記載されていますが、詳細は CSS カスタムハイライト API が定義しています。

インターフェイス

用語

ガイド

CSS 擬似要素

すべての CSS 仕様と WebVTT で定義されている擬似要素のアルファベット順リスト。

学習: 擬似クラスと擬似要素

セレクターに関する CSS 構成要素の節の一部です。この記事では、擬似要素とは何か、擬似クラスとどのように組み合わせ、 ::before および ::after 擬似要素でコンテンツを生成するために使用できるかを定義します。

擬似要素を使用した装飾的なボックスの作成

視覚効果のために ::before と ::after 擬似要素を使用して生成コンテンツをスタイル設定する例です。

関連する概念

仕様書

Specification
CSS Pseudo-Elements Module Level 4

関連情報