はじめに
何度か忘れて、あれ?どっちだったっけ?ってなることがあったのでメモがわりに書いておきます
擬似要素について
選択された要素の、特定の部分を整形できるようにするものです。例えば、今回タイトルに出した::afterや::beforeなどがこれに当たります。
とりあえず、答え
端的に言えば、現在は擬似要素の前に二重コロン(::)をつけることが正解です。
なので、
.target::after { }
これが正解です。
ただし、注意点があります。IE8.0未満にも対応させる時など、CSS3対応していないOSで使用する場合は、単一コロン(:)を使用しないといけません。そのため、多くのブラウザでは単一コロン(:)でもしようできるようになっています。
これは、CSS2とCSS3で仕様が異なるためです。なぜ、CSS2とCSS3で違いができたのでしょうか
CSS2とCSS3で仕様が異なる理由
CSS3からは、擬似クラスと区別をつけるため、
擬似要素には二重コロン(::)を、擬似クラスには単一コロン(:)をつけることになりました。
CSS2ではこの二つに区別をつけていなかったため、どちらも単一コロン(:)で記述していました。
擬似クラスとは
選択された要素に対して、特定の状態を指定することができるものです。擬似要素とは違って、対象となる要素全体に関わるスタイルを指定できます。例えば、マウスカーソルが要素の上にいた際のスタイルを指定する:hoverなどがこれに当たります。
まとめ
- 擬似要素には二重コロン(::)
- 擬似クラスには単一コロン(:)
- ただし、CSS3が対応していないOSでの使用を考えるならどちらも単一コロン(:)