CSS 擬似クラスと疑似要素の違い

	意味	記法	例
擬似クラス	要素の状態や条件を表す	:（コロン1つ）	:hover, :nth-child()
疑似要素	要素の一部や仮想的な部分を作る	::（コロン2つ）	::before, ::after

要素の状態や条件に応じてスタイルを適用するためのものです。

主な特徴

HTMLの要素に新しい状態を仮想的に追加してスタイルを変えます。

対象は要素全体です。

コロン

1つ(:)で書きます。

例

a:hover {
  color: red;
}

マウスをリンクの文字に乗せる（hover状態）とリンクの文字が赤色になります。

要素の一部や生成された部分にスタイルを適用します。

主な特徴

実際のHTMLに存在しない仮想の要素を作り出します。

対象は要素の中の一部です。（たとえば最初の文字や直前・直後など）。

コロン

2つ(::)で書きます（CSS3以降の標準）。

例

p::first-line {
  font-weight: bold;
}

段落 <p> の最初の1行だけ太字にします。