お知らせ / ブログINFO / BLOG
2019.08.08
【CSS】疑似クラス、疑似要素の:(コロン)の数について
今更ではありますが、疑似クラス、疑似要素の:(コロン)の数についてです。
CSS3から変更になっていますが、昔は疑似クラスも疑似要素もコロンは1つでしたので、現状1つでもエラーにはなっていません。
ですが、今後エラーになるとも限らないので、1つと2つでしっかり使い分けしていく方が無難かと思います。
疑似クラス
コロンの数は1つです。
:active
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
疑似要素
コロンの数は2つです。
::before
::after
::first-line
::first-letter
::cue
::selection
::slotted()
::before::after::first-line::first-letter::cueに関してはコロン1つでもエラーにはなりません。が残りは2つでないとダメなようです。
調べてみてわかりましたが、使用定義が確定していないものは抜いてありますが、こんなに種類あったんですね(笑)
対応しているブラウザに制限があるものもあるので実際に使用するのは僅かではありますが、よく使用する疑似クラス・疑似要素もあります。
SEOにも役立つものあるので、しっかりと理解しておく事が必要です。
よく使用するものについては後日個別に紹介していきます。
