LoginSignup
6
3

More than 5 years have passed since last update.

:afterなのか::afterなのか問題

Posted at

はじめに

何度か忘れて、あれ?どっちだったっけ?ってなることがあったのでメモがわりに書いておきます

擬似要素について

選択された要素の、特定の部分を整形できるようにするものです。例えば、今回タイトルに出した::afterや::beforeなどがこれに当たります。

とりあえず、答え

端的に言えば、現在は擬似要素の前に二重コロン(::)をつけることが正解です。
なので、

.target::after { }

これが正解です。

ただし、注意点があります。IE8.0未満にも対応させる時など、CSS3対応していないOSで使用する場合は、単一コロン(:)を使用しないといけません。そのため、多くのブラウザでは単一コロン(:)でもしようできるようになっています。
これは、CSS2とCSS3で仕様が異なるためです。なぜ、CSS2とCSS3で違いができたのでしょうか

CSS2とCSS3で仕様が異なる理由

CSS3からは、擬似クラスと区別をつけるため、
擬似要素には二重コロン(::)を、擬似クラスには単一コロン(:)をつけることになりました。
CSS2ではこの二つに区別をつけていなかったため、どちらも単一コロン(:)で記述していました。

擬似クラスとは

選択された要素に対して、特定の状態を指定することができるものです。擬似要素とは違って、対象となる要素全体に関わるスタイルを指定できます。例えば、マウスカーソルが要素の上にいた際のスタイルを指定する:hoverなどがこれに当たります。

まとめ

  • 擬似要素には二重コロン(::)
  • 擬似クラスには単一コロン(:)
  • ただし、CSS3が対応していないOSでの使用を考えるならどちらも単一コロン(:)
6
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3