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を書くなら「::」を使うのが安心で正確です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次