疑似要素 (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

関連情報