疑似要素 (Pseudo-elements)

概要

擬似クラスと同じく、擬似要素 (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

Document Tags and Contributors

Contributors to this page: ethertank, Marsf
最終更新者: ethertank,
サイドバーを隠す