CSSの擬似クラスの : と :: どっちを使えばいい？【使い分けと理由を解説】

CSSでスタイルを指定していると、
:hover や ::before など、コロンが1個のものと2個のものを見かけたことがありませんか？

「これって何が違うの？どっちを使えばいいの？」
と疑問に思った方のために、この記事では「:（1つ）」と「::（2つ）」の違いと使い分け方をわかりやすく解説します。

目次

: と :: の違いとは？

ざっくり言うと、

:（コロン1個） → 擬似クラス（pseudo-class）
::（コロン2個）→ 擬似要素（pseudo-element）

という区別があります。

記述	意味	例
:hover	状態を表す（クラス）	マウスを載せたとき
:nth-child(2)	要素の順番でスタイルを変える	2番目の要素に適用
::before	要素の直前に仮想的な内容を追加	装飾や記号の追加など
::after	要素の直後に仮想的な内容を追加	記号や線などの挿入に便利

なぜ :: が登場したの？

もともと、CSS2までは :before や :after などにもコロン1個が使われていました。
しかし、CSS3から擬似要素と擬似クラスを明確に区別するために「::（ダブルコロン）」が導入されました。

つまり…

:before → CSS2での書き方（今も動く）
::before → CSS3以降の正式な書き方

です。

どっちを使えばよいか？

基本的には「::（ダブルコロン）」を使いましょう。
なぜなら、それがCSS3の正式仕様だからです。
ただし、ブラウザ互換性の観点からは、::before も :before も どちらも今の主なブラウザで問題なく動作します。

よく使う擬似クラスと擬似要素一覧

擬似クラス（:）

• :hover（マウスが乗ったとき）
• :focus（フォーカスされたとき）
• :active（クリック中）
• :nth-child()（◯番目の子要素）
• :first-child（最初の子）
• :last-child（最後の子）

擬似要素（::）

• ::before（要素の前に挿入）
• ::after（要素の後に挿入）
• ::first-letter（最初の1文字）
• ::first-line（最初の1行）

使用例

今からは :: を使えばOK！

• : → 状態や条件を指定する「擬似クラス」
• :: → 要素の中に仮想の内容を追加する「擬似要素」
• 昔はどちらも : だったが、CSS3から正式に分かれた
• 今はどちらの書き方も動くけど、新しく書くなら :: を使うのがベスト

古いテーマやサイトでは :before が使われているかもしれませんが、これから自分でCSSを書くなら「::」を使うのが安心で正確です。