CSS疑似要素、疑似クラスのコロンの数。1つ2つの違い

今更ですが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