【CSS】疑似クラスと疑似要素の違いとは？一覧や複数指定の正しい書き方を図解

CSSを書いていると、:hover、:nth-child、:not()、::before、::afterのような書き方を見かけることがあります。しかし、「コロン1つと2つは何が違うの？」「疑似クラスと疑似要素はどう使い分けるの？」「複数指定はどう書けばいいの？」と迷う方も多いはずです。

CSSの疑似クラスは、要素そのものではなく、要素の状態や条件に応じてスタイルを当てるための仕組みです。この記事では、疑似クラスと疑似要素の違い、よく使う疑似クラス一覧、複数指定の正しい書き方、aタグの疑似クラスで順番を間違えると効かない理由まで解説します。

CSSの疑似クラスとは？

疑似クラスとは、要素の状態・順番・条件などに応じてCSSを適用するためのセレクタです。
通常のCSSでは、class名やタグ名を指定してスタイルを当てます。

.button {
  background-color: #0073aa;
}

疑似クラスを使うと、「マウスが乗っているとき」「何番目の要素か」「特定の条件に当てはまらない要素か」など、状態や条件を指定できます。

.button:hover {
  background-color: #005f8f;
}

この例では、.buttonにマウスを乗せたときだけ背景色が変わります。

疑似クラスはコロン1つで書く

疑似クラスは、基本的にセレクタの後ろにコロン1つで書きます。

a:hover {
  color: #e60033;
}

疑似クラスは「クラス名」ではありません。HTML側にclass=”hover”のように書くものではなく、CSS側で状態や条件を指定する書き方です。

疑似クラスを使うとHTMLを増やさずに指定できる

たとえば、テーブルの偶数行だけ背景色を変えたい場合、HTMLに1行ずつclassを付けなくても、:nth-child(even)で指定できます。

tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

疑似クラスを使うと、HTMLを汚さずに「状態」や「条件」に合わせたスタイルを当てられます。

【一番重要】疑似クラスと疑似要素の決定的な違いと覚え方

疑似クラスと疑似要素は、名前が似ているため混同しやすいです。まずは次のように覚えましょう。

種類	書き方	意味	例
疑似クラス	コロン1つ	要素の状態・条件	:hover、:nth-child()
疑似要素	コロン2つ	要素の一部や仮想的な場所	::before、::after

コロン1つ（:hoverなど）＝ 要素の「状態」

疑似クラスは、要素がどのような状態か、どの条件に当てはまるかを指定します。

button:hover {
  opacity: 0.8;
}

この例では、button要素にマウスが乗っている状態だけにCSSを当てています。ほかにも、:first-childは最初の子要素、:checkedはチェックされた状態、:disabledは無効化された状態を表します。

疑似クラスは「状態や条件を選ぶもの」と覚えると分かりやすいです。

コロン2つ（::afterなど）＝ 架空の「場所（要素）」

疑似要素は、要素の一部や、実際のHTMLには書いていない仮想的な場所を指定します。

.label::before {
  content: "★";
  color: #e6a700;
}

この例では、.labelの前に星マークを追加しています。HTML側には星マークを書かなくても、CSSで見た目として追加できます。

::beforeや::afterは疑似要素です。:hoverや:nth-childのような疑似クラスとは役割が違います。

実務での覚え方

迷ったときは、次の基準で考えると判断しやすいです。

/* 疑似クラス：状態 */
a:hover {
  color: red;
}

/* 疑似要素：仮想的な場所 */
a::after {
  content: " →";
}

よく使う！主要なCSS疑似クラス一覧と使い方

CSSの疑似クラスは数多くありますが、初心者の方がまず覚えるなら、:hover、:nth-child()、:not()の3つがおすすめです。

疑似クラス	役割	よく使う場面
:hover	マウスが乗った状態	ボタン、リンク、カード
:nth-child()	指定した順番の要素	リスト、テーブル、カード一覧
:not()	指定した条件以外	一部だけ除外した装飾
:focus	フォーカス中の状態	フォーム、リンク
:checked	チェックされた状態	チェックボックス、ラジオボタン

マウスを乗せたとき（:hover）

:hoverは、マウスを乗せたときにスタイルを変える疑似クラスです。

<a class="button" href="#">詳しく見る</a>

.button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
}

.button:hover {
  background-color: #005f8f;
}

この例では、リンクにマウスを乗せたときだけ背景色が変わります。

スマートフォンなどのタッチ端末では、hoverの挙動がPCと違う場合があります。重要な情報をhover時だけに表示する設計は避けましょう。

○番目の要素（:nth-child）

:nth-child()は、兄弟要素の中で何番目かを指定する疑似クラスです。テーブルの行を一行おきに色分けするときによく使います。

tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

このCSSでは、tbody内の偶数行だけ背景色を変えています。

:nth-childは、リストやテーブルなど「同じ要素が並んでいる場面」で特に便利です。

以外を指定（:not()）

:not()は、指定した条件に当てはまらない要素を選ぶ疑似クラスです。

.nav a:not(.current) {
  color: #555;
}

この例では、.currentが付いていないリンクだけにCSSを当てています。
ボタン一覧で、特定のボタンだけ除外したい場合にも使えます。

.button:not(.primary) {
  background-color: #f5f5f5;
  color: #333;
}

:not()の中に入れる条件が複雑すぎると、後からCSSを読みにくくなります。除外条件はシンプルに保ちましょう。

フォームでよく使う疑似クラス

フォームのコーディングでは、入力中を表す :focus や、選択状態を表す :checked もよく使われます。

/* 入力欄（input）にカーソルが当たっているとき */
input:focus {
border-color: #0073aa;
outline: none;
}

/* チェックが入ったinputの「すぐ後ろにあるlabel」 */
input:checked + label {
font-weight: bold;
color: #0073aa;
}

:focusは入力欄を選択している状態、:checkedはチェックボックスやラジオボタンが選択されている状態に使います。

関連記事：「HTMLのselectタグとは？フォームでの使い方を解説」

【トラブル防止】疑似クラスの正しい書き方と落とし穴

疑似クラスは便利ですが、書き方を少し間違えるだけでCSSが効かなくなります。ここでは、初心者がつまずきやすいポイントを整理します。

疑似クラスを「複数」同時に指定する方法

疑似クラスは、同じセレクタに複数続けて書けます。

a:hover:focus {
  outline: 2px solid #0073aa;
}

この例では、リンクがhover状態かつfocus状態のときにCSSが当たります。

li:first-child:hover {
  background-color: #fff7d6;
}

この例では、最初のliにマウスを乗せたときだけ背景色が変わります。

疑似クラスを複数指定するときは、セレクタの後ろに続けて書きます。

スペースを入れると意味が変わる

疑似クラスの前に不要なスペースを入れると、別の意味になってしまいます。

.menu :hover {
  color: red;
}

これは「.menuの中にある、hover状態の要素」という意味です。menu自体にhoverを当てたい場合は、スペースを入れません。

.menu:hover {
  color: red;
}

セレクタ内の半角スペースは「中にある要素」を意味します。何となく空けると、別の要素を指定してしまいます。

aタグ（リンク）の疑似クラスは「記述する順番」を間違えると効かない

aタグの疑似クラスでは、記述順が重要です。特に、:link、:visited、:hover、:activeをまとめて書く場合は、順番を間違えるとhoverなどが上書きされることがあります。

a:link {
  color: #0073aa;
}

a:visited {
  color: #6a4fb3;
}

a:hover {
  color: #e60033;
}

a:active {
  color: #b00020;
}

この順番は、LVHA順と呼ばれることがあります。

Link → Visited → Hover → Active

aタグの疑似クラスは、:link、:visited、:hover、:activeの順番で書くと上書きトラブルを避けやすくなります。

:hoverを:activeの後ろに書くなど、順番が崩れると意図したリンク色にならない場合があります。

:nth-childと:nth-of-typeを混同しない

:nth-child()は、同じ親の中で「何番目の子要素か」を見ます。一方、:nth-of-type()は、同じタグの種類の中で何番目かを見ます。

/* 親の中で2番目の子要素がpなら当たる */
p:nth-child(2) {
  color: red;
}

/* pタグの中で2番目のpに当たる */
p:nth-of-type(2) {
  color: blue;
}

リストやテーブルのように同じタグが並んでいる場合は:nth-child()で十分なことが多いです。途中に別のタグが混ざる場合は、:nth-of-type()も検討しましょう。

:nth-childをテーブル装飾で使う具体例

疑似クラスの中でも、:nth-child()はテーブル装飾と相性が良いです。行を一行おきに色分けするだけで、表が読みやすくなります。

テーブルをストライプ表示にする

<table class="stripe-table">
  <thead>
    <tr>
      <th>タグ</th>
      <th>役割</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr</td>
      <td>行を作る</td>
    </tr>
    <tr>
      <td>tbody</td>
      <td>本体行をまとめる</td>
    </tr>
  </tbody>
</table>

.stripe-table {
  width: 100%;
  border-collapse: collapse;
}

.stripe-table th,
.stripe-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.stripe-table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

このように、tbody tr:nth-child(even)と書くと、見出し行を除いた本体行だけを一行おきに色分けできます。

theadを含めてtr:nth-childを指定すると、見出し行も数えられて色の付き方がずれる場合があります。

テーブル記事と一緒に読むと理解しやすい

疑似クラスの使い方だけを見ると少し抽象的ですが、テーブル装飾に使うと実用イメージがつかみやすくなります。

:nth-childの具体的な活用例として、HTMLテーブルの行を交互に色分けする方法を覚えておくと実務でも役立つでしょう。

疑似クラスを書くときの実務チェックリスト

疑似クラスを使うときは、次のポイントを確認しましょう。

確認項目	チェック内容
コロン	疑似クラスはコロン1つ、疑似要素はコロン2つで書いているか
スペース	.menu:hoverと.menu :hoverを混同していないか
複数指定	a:hover:focusのように続けて書いているか
リンク順	aタグは:link、:visited、:hover、:activeの順番を意識しているか
タッチ端末	hoverだけに重要な情報を置いていないか
テーブル	tbody tr:nth-child(even)のように対象範囲を絞っているか

疑似クラスは便利ですが、スペース、順番、対象範囲を間違えると効かない原因になります。

公式ドキュメントも確認する

CSSの疑似クラスや疑似要素を正確に確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs 疑似クラス一覧
• MDN Web Docs 疑似要素一覧
• MDN Web Docs :hover
• MDN Web Docs :nth-child
• MDN Web Docs :not()

まとめ：疑似クラスをマスターしてコーディングを効率化しよう

この記事では、CSSの疑似クラスについて解説しました。

疑似クラスは、要素の状態や条件に応じてスタイルを当てるためのCSSセレクタです。疑似クラスはコロン1つで書き、:hover、:nth-child()、:not()などがあります。一方、疑似要素はコロン2つで書き、::beforeや::afterのように、要素の一部や仮想的な場所を指定します。

疑似クラスを使うと、マウスを乗せたときのボタン装飾、テーブルのストライプ表示、一部だけ除外する指定などを、HTMLを増やさずに実装できます。ただし、スペースの有無、複数指定、aタグの記述順、スマホでのhover挙動には注意が必要です。

まずは:hover、:nth-child()、:not()の3つから覚えると、日常のコーディングで使える場面が一気に増えるでしょう。