1 2 3 4 5 6 7 8 9 10 11 12 |
/* 擬似クラス:ボタンにマウスを乗せたとき */ .button:hover { background-color: #1f95e7; } /* 擬似要素:要素の前に記号を追加 */ h2::before { content: "★ "; color: gold; } |
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行)
使用例
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 擬似クラス:ボタンにマウスを乗せたとき */ .button:hover { background-color: #1f95e7; } /* 擬似要素:要素の前に記号を追加 */ h2::before { content: "★ "; color: gold; } |
今からは :: を使えばOK!
- : → 状態や条件を指定する「擬似クラス」
- :: → 要素の中に仮想の内容を追加する「擬似要素」
- 昔はどちらも
:
だったが、CSS3から正式に分かれた - 今はどちらの書き方も動くけど、新しく書くなら :: を使うのがベスト
古いテーマやサイトでは :before が使われているかもしれませんが、これから自分でCSSを書くなら「::」を使うのが安心で正確です。