概要
疑似クラスと同じく、疑似要素 (Pseudo-elements) はセレクタに追加して記述するものですが、:after の様な、特別な状態を記述するだけのものではありません。疑似要素は、ドキュメントの特定のパーツをスタイル付けします。例えば ::first-line 疑似要素は、セレクタで指定された要素の最初の行だけを対象にします。
構文
selector:pseudo-element {
property: value;
}
すべての疑似要素
補足
時々、1 個のコロン (:) ではなく、2 個のコロン (::) が使用されることがあります。これは、CSS3 の一部であり、疑似クラスと疑似要素の区別を明確にしようとするためのものです。多くのブラウザは両方の値をサポートしています。
注記: 例外として、
::selection は常にダブルコロン (::) で始まります。疑似要素はセレクタに 1 個だけ使用することができます。ステートメント内のシンプルセレクタの後に現れます。
| ブラウザ | サポート開始バージョン | サポート内容 |
|---|---|---|
| Internet Explorer | 8.0 | :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 |