今更ですがCSSのコロン2つ付ける場合の
定義を明確にまとめてみました。
なんとなくでなく、わかって使うようにしたい。
#回答:疑似クラスは「:」、疑似要素は「::」
CSS3より擬似クラスと疑似要素でコロンの記述が変更となった。
ブラウザではコロン1つでもエラーにならない。
##疑似クラス 一覧
コロン1つ「:」を記述する。
:active
:checked
:default
:defined
:disabled
:drop
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:matches()
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
2018/12/24現在 実験中の擬似クラスは除く
##疑似要素 一覧
コロン2つ「::」を記述する。
::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()
2018/12/24現在 実験中の擬似要素は除く
##参考
CSSの擬似要素と擬似クラスの違いを明確に – YATのblog
https://wp.yat-net.com/?p=4505
CSSの:afterと::afterどっちが正しい? 疑似クラスとか疑似要素って何? | 初代編集長ブログ―安田英久 | Web担当者Forum
https://webtan.impress.co.jp/e/2015/12/08/21670
疑似要素 (Pseudo-elements) | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
疑似クラス | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes