擬似要素 (Pseudo-elements)

CSS の 擬似要素 (Pseudo-elements) はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば ::first-line 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

/* 各 <p> 要素の最初の行です。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注: 擬似要素とは対照的に、擬似クラスは要素の状態に基づいてスタイル付けを行うことができます。

構文

selector::pseudo-element {
  property: value;
}

擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。

注: 規則として、単一コロン (:) の代わりに二重コロン (::) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。

標準の擬似要素の索引

ブラウザー 対応開始バージョン 対応内容
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

仕様書

仕様書 状態 備考
CSS Level 1 勧告 擬似クラスと擬似要素を定義した。

関連情報