擬似要素
CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば ::first-line
擬似要素は、段落の最初の行のフォントを変更するために使用することができます。
/* すべての <p> 要素の最初の行です。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
メモ: 擬似要素とは対照的に、擬似クラス
は要素の状態に基づいてスタイル付けを行うことができます。
構文
selector::pseudo-element {
property: value;
}
擬似要素は 1 つのセレクターに 1 つだけ使用することができます。文内の単純セレクターの後に置く必要があります。
メモ: ルールとして、単一コロン (:
) の代わりに二重コロン (::
) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の構文に対応しています。
索引
CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。
A
B
::backdrop
Experimental::before (:before)
C
F
G
::grammar-error
Experimental
M
::marker
Experimental
P
::part()
Experimental::placeholder
Experimental
S
::selection
::slotted()
::spelling-error
Experimental
T
::target-text
Experimental
仕様書
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # pseudo-element-selectors |
ブラウザーの互換性
ブラウザー | 対応開始バージョン | 対応内容 |
---|---|---|
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 |