HTMLとCSSの疑似クラス・疑似要素の違いをやさしく完全理解する

HTMLとCSSを学び始めると、あるタイミングで多くの人が同じところで立ち止まります。
それが 「疑似クラス」と「疑似要素の違い」 です。

• :hover と ::before は何が違うの？
• どちらもコロンが付いているけど、役割は？
• 実務ではどう使い分ければいいの？

こうした疑問を抱くのは、とても自然なことです。
なぜなら、見た目が似ていて・名前も似ていて・しかも同じCSSに書くからです。

この記事では、CSS初学者の方が「なるほど、そういうことか」と腑に落ちることを一番の目的に、専門用語を必要最小限に抑えながら、丁寧に・段階的に解説していきます。

そもそも「疑似」とはどういう意味？

まず言葉の意味から整理しましょう。

「疑似（ぎじ）」とは本物ではないが、本物のように振る舞うものという意味です。

CSSの世界では、

• 実際にはHTMLに書いていない
• でも存在しているかのように扱える

そんな仕組みを「疑似〜」と呼んでいます。

疑似クラスと疑似要素は何が違うのか

最初に結論をシンプルに示します。

　✅ 疑似クラス

👉 要素の「状態」を表す

　✅ 疑似要素

👉 要素の「一部分」を作り出す

この違いさえ押さえられれば、混乱はかなり減ります。

疑似クラスとは？｜「今どういう状態か」を判定する仕組み

　疑似クラスの基本的な考え方

疑似クラスは要素が置かれている「状態」や「条件」に応じて、CSSを切り替えるためのものです。

たとえばこんな状態があります。

• マウスが乗っている
• クリックされている
• 入力欄が選択されている
• リンクが既に訪問済み

これらはすべて「要素の状態」です。

　代表的な疑似クラスの例

a:hover {
  color: red;
}

このCSSはこう読めます。

aタグが hover（マウスが乗った状態） になったとき、文字色を赤にする。

HTMLの構造は何も変わっていません。
変わっているのは 状態だけ です。

　よく使われる疑似クラス一覧

特に :hover :focus :active は、Web制作ではほぼ毎回使うレベルで重要です。

　疑似クラスの重要なポイント

✅ HTMLを増やさない
✅ 見た目ではなく「条件」を見ている
✅ ユーザー操作と相性が良い

つまり疑似クラスは「ユーザーの行動や状況に反応するCSS」と考えると理解しやすくなります。

疑似要素とは？｜「HTMLにないパーツ」を作る仕組み

　疑似要素の基本的な考え方

疑似要素は、疑似クラスとはまったく性質が違います。

疑似要素は要素の中の一部分を指定したり、新しい見た目を追加する仕組みです。

しかも重要なのは、HTMLには存在しないという点です。

　::before と ::after の例

p::before {
  content: "★";
  color: gold;
}

このCSSの意味は、pタグの「中身の前」に ★ を表示するです。

HTMLには ★ は書いていません。
それでもブラウザ上では表示されます。

　よく使われる疑似要素一覧

特に ::before と ::after は、装飾・アイコン・区切り線などで非常によく使われます。

　疑似要素の重要なポイント

✅ HTMLを汚さず装飾できる
✅ 見た目専用のパーツ
✅ content プロパティが必須

疑似要素は「デザインのための仮想パーツ」と考えると腑に落ちます。

コロン1つと2つの違いについて

ここで多くの初心者が混乱します。

• :hover
• ::before

なぜコロンの数が違うのでしょうか？

　実は昔は全部「:」だった

CSSの初期仕様では、

• 疑似クラス
• 疑似要素

どちらも コロン1つ（:） で書かれていました。

しかし、次第に役割が明確になり、

• 状態 → 疑似クラス
• 部品 → 疑似要素

と整理された結果、
疑似要素だけ「::」で書くルールになりました。

　現在の正しい書き方

※ :before でも動く場合はありますが、正しい・推奨される書き方は ::before です。

一目でわかる違いまとめ表

初心者がつまずきやすい勘違い

　❌ hover は「追加」ではない

hoverは何かを付け加えているように見えますが、実際には 状態が切り替わっているだけ です。

　❌ before / after はHTMLの代わりではない

疑似要素は便利ですが、意味を持つ文章や重要な情報を入れる場所ではありません。

あくまで装飾用です。

実務での使い分けイメージ

ここが分かると、一気にプロ目線になります。

• ボタンにマウスを乗せたら色が変わる
  → 疑似クラス（:hover）
• 見出しの前に装飾アイコンを置く
  → 疑似要素（::before）
• 入力欄が選択中に枠線を強調
  → 疑似クラス（:focus）
• カードUIに装飾ラインを足す
  → 疑似要素（::after）

覚え方のコツ（超重要）

迷ったら、この質問を自分に投げかけてください。

これは「状態」？それとも「部品」？

• 状態 → 疑似クラス
• 部品 → 疑似要素

これだけで9割解決します ✨

まとめ｜疑似クラスと疑似要素は役割がまったく違う

• 疑似クラスは 「条件分岐」
• 疑似要素は 「装飾用パーツ」
• 見た目が似ていても、考え方は正反対
• 初心者のうちに理解しておくとCSSが一気に楽になる

最初は難しく感じますが、ここを乗り越えると CSSでできる表現の幅が一段階広がります。

焦らず、実際に書きながら「これは状態？部品？」と問い続けてみてください 😊

関連

【初心者向け】HTMLの命名規則｜迷わないクラス名の付け方と一覧表（outer・wrapper・container・inner・content編）

補足｜初心者が次につまずきやすいポイント

ここからは、本文を読んで「なんとなく分かったけど、ここは少し不安かも…」となりやすい部分を補足します。

実際の制作現場や学習の中で、初心者が高確率でつまずくポイントを中心に整理しました。

補足① なぜ疑似要素には content が必要なのか？

「::before や ::after を書いたのに、何も表示されない」
これは ほぼ全員が一度は通る道です。

　原因はこれです

.button::before {
  background: red;
}

このコード、間違っていませんが表示されません。

理由はとてもシンプルで、疑似要素は content がないと存在できないからです。

　正しい最小構成

.button::before {
  content: "";
  background: red;
}

これで初めて「空だけど存在はしている疑似要素」が生成されます。

　なぜ content が必須なの？

疑似要素は、

• HTMLに書かれていない
• CSSだけで作られる

という仮想的な存在です。

そのため、「ここに何かを入れますよ」という宣言として content が必要になります。

文字を表示しなくても、content: "" を書くのはそのためです。

✅ 疑似クラス（:hover など）には不要
✅ 疑似要素（::before / ::after）だけ必須

この違いは、しっかり覚えておくと安心です。

補足② 疑似要素はHTMLの代わりに使っていいの？

ここは かなり重要 なポイントです。

結論から言うと、

❌ HTMLの代わりには使わない
✅ 装飾目的だけに使う

が正解です。

　やってはいけない例

• 見出しの文字を ::before で入れる
• ボタンのラベルを疑似要素で表示する
• 重要な説明文を疑似要素で追加する

見た目は問題なくても、

• 検索エンジンに正しく伝わらない
• スクリーンリーダーで読まれない
• CSSが無効だと消える

といった 重大な問題が出ます。

　正しい使い方の考え方

• 意味を持つ情報 → HTML
• 見た目・装飾・アクセント → 疑似要素

たとえば：

• 見出し前の装飾アイコン
• カードの装飾ライン
• ボタンの矢印演出

こういったものは、疑似要素が最適です。

補足③ 疑似クラスと疑似要素は「組み合わせ」が強い

本編でそれぞれの役割が分かったら、次に知ってほしいのが「組み合わせる発想」です。

　よくある実践例

.button::after {
  content: "→";
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover::after {
  opacity: 1;
}

このコードでは、

• :hover → 状態の変化
• ::after → 装飾パーツ

を組み合わせています。

　ここで理解してほしいこと

• 疑似クラス → いつ表示するか
• 疑似要素 → 何を表示するか

という役割分担です。

この考え方ができると、

• hoverで線が伸びる
• hoverでアイコンが現れる
• hoverで装飾がスッと動く

といった 一段上のUI表現が自然に作れるようになります。

補足④ CSS設計的に見るとどう考えればいい？

少しだけ設計の視点も入れておきましょう（難しく考えなくてOKです）。

　ざっくり役割分担

• 疑似クラス
  → 振る舞い・状態・インタラクション
• 疑似要素
  → 見た目・装飾・演出

この役割を意識しておくと、

• CSSが読みやすくなる
• 後から修正しやすい
• 他の人が見ても理解しやすい

というメリットがあります。

補足まとめ｜ここが理解できていれば安心

✅ 疑似要素には content が必要
✅ 疑似要素は装飾専用
✅ 重要な情報はHTMLで
✅ 疑似クラス × 疑似要素の組み合わせが実務で活きる

本文で「違い」を理解し、この補足で「使いどころ」が分かれば、CSSの疑似構文については かなり盤石な理解 です。

ここまで理解できているなら、次に進んでも大丈夫ですよ。

関連

Flexboxの向きと個別配置をマスターしよう｜flex-directionとalign-self徹底解説

関連

:root（ルート疑似クラス）完全ガイド：CSS設計の土台を強くする