擬似要素

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

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

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

構文

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

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

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

CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。

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

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