【CSS】疑似クラスとは？初心者向けにわかりやすく３分で解説

疑似クラスは、HTML要素の特定の状況や条件に基づいてCSSスタイルを適用するための機能です。

例えば、「マウスカーソルが当たっているとき」や「入力欄やボタンなどが選択されている（フォーカスされている）とき」だけに、CSSを適用して色を変えたい！というような場合に用いることができます。

参考　HTMLの要素とは？

疑似クラスは、コロン（:）記号で始まるセレクタで、HTML要素に直接クラス属性を追加することなく、特定の状態でのみスタイルを適用できます。

参考　CSSのセレクタとは？

疑似クラスの構文ルール

疑似クラスは、セレクタに「：（コロン）」を付けて記述するだけ。

h2:hover{
  color:red
}

このページで学べる内容

疑似クラスとは？
疑似クラスの使い方/構文ルール
代表的な疑似クラス

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）

疑似クラスとは？
代表的な疑似クラス
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

疑似クラスとは？

疑似クラスはセレクタの一種です。

セレクタと同様にCSSでデザインの対象を指定する役割を担います。ただし普通のセレクタとは異なるのは、この疑似クラスが指し示す要素は「ある特定の状態」を持っている場合に限るということ。

参考　CSSのセレクタとは？

どういうことか、疑似クラス「hover」を例に説明していきたいと思います。

疑似クラス「hover」は、対象の要素が「マウスが合わせられた状態」である場合を指し示す役割を持ちます。

まずは、疑似クラス「hover」を用いない場合にhタグを装飾する例を見てみましょう。

HTML

<head>
 <style>
  h2{
  color:red
  }
 </style>
</head>
<body>
 <h2>サンプルテキスト</h2>
</body>

ブラウザで表示した結果

ご覧のように、CSSで指定した通り文字が赤色で表示されました。

では、hover「マウスが当てられた時の要素」という疑似クラスを用いた場合を見てみましょう。

HTML(疑似クラスを用いた場合)

<head>
 <style>
  h2:hover{
  color:red
  }
 </style>
</head>
<body>
 <h2>サンプルテキスト</h2>
</body>

ブラウザで表示した結果

ご覧のように、赤で表示されていません。ですが、疑似クラス「hover」を指定したため、マウスを当てると赤に変化するようになります。

実際にマウスホバー時の動作の違いを分かりやすく示したサンプルコードをお見せします。以下の画面にカーソルを当ててみて動作の違いを確認してみてください。

See the Pen 疑似クラス① by ビズドットオンライン (@biz-online) on CodePen.

このサンプルコードでは、疑似クラスを利用したボタンは、マウスカーソルがボタンの上にあるときに背景色が青に変わります。

一方、疑似クラスを利用しないボタンは、背景色が常に緑のままです。このように、疑似クラスを使うことで、特定の状態（この場合はホバー状態）に応じてスタイルを適用することができます。

参考　HTML：styleタグ

代表的な疑似クラス

疑似クラスはマウスホバー時（マウスカーソルが乗っている間）以外にも様々な種類が存在します。

代表的な疑似クラス

疑似クラス	説明
:hover	要素にマウスカーソルが乗っている間にスタイルが適用されます。
:active	要素がアクティブ（クリックされている）間にスタイルが適用されます。
:focus	要素がフォーカスされている間にスタイルが適用されます（例：入力欄にカーソルがある場合）。
:visited	リンクが訪問済みの場合にスタイルが適用されます。
:link	未訪問のリンクにスタイルが適用されます。
:first-child	要素が親要素の最初の子要素の場合にスタイルが適用されます。
:last-child	要素が親要素の最後の子要素の場合にスタイルが適用されます。
:nth-child(n)	要素が親要素内でn番目の子要素の場合にスタイルが適用されます。nは整数または式で指定できます。
:nth-last-child(n)	要素が親要素内で後ろからn番目の子要素の場合にスタイルが適用されます。nは整数または式で指定できます。
:not(selector)	指定したセレクタに一致しない要素にスタイルが適用されます。
:disabled	要素が無効化（disabled属性が設定されている）されている場合にスタイルが適用されます。
:checked	チェックボックスやラジオボタンが選択されている状態の場合にスタイルが適用されます。
:root	ドキュメントのルート要素（通常は<html>要素）にスタイルが適用されます。
:empty	要素が空（子要素やテキストノードを持たない）の場合にスタイルが適用されます。
:first-of-type	要素がその種類の兄弟要素の中で最初のものである場合にスタイルが適用されます。
:last-of-type	要素がその種類の兄弟要素の中で最後のものである場合にスタイルが適用されます。

それぞれの詳細をサンプルコード付きで１つ１つ分かりやすく解説しておきます。

:hover

:hoverはマウスカーソルが要素の上にある間だけスタイルを適用します。ボタンやリンクなどのインタラクション要素の見た目を変えることで、ユーザーにフィードバックを提供します。

/* ボタンにマウスカーソルが乗ったときに背景色を変更 */
button:hover {
  background-color: blue;
}

:active

:activeは要素がアクティブ（クリックされている）間だけスタイルを適用します。これにより、ユーザーが要素を操作している状態を視覚的に示すことができます。

/* ボタンがクリックされたときに背景色を変更 */
button:active {
  background-color: red;
}

:focus

/* テキストボックスがフォーカスされたときに枠線の色を変更 */
input:focus {
  border-color: blue;
}

:focusはフォーカスがあたっている要素にスタイルを適用します。フォーカスされた要素に視覚的な変化を与えることで、ユーザーが操作中の要素を認識しやすくなります。

:visited

:visitedはリンクが訪問済みの場合にスタイルを適用します。これにより、ユーザーがどのリンクを訪れたかを視覚的に示すことができます。

/* 訪問済みのリンクの色を変更 */
a:visited {
  color: purple;
}

:link

:linkは未訪問のリンクにスタイルを適用します。これにより、ユーザーがどのリンクをまだ訪れていないかを視覚的に示すことができます。

/* 未訪問のリンクの色を変更 */
a:link {
  color: blue;
}

:first-child

:first-childは要素が親要素の最初の子要素である場合にスタイルを適用します。これにより、リストやテーブルなどの最初の子要素に特別なスタイルを適用することができます。

/* 最初の子要素にスタイルを適用 */
li:first-child {
  font-weight: bold;
}

:last-child

:last-childは要素が親要素の最後の子要素である場合にスタイルを適用します。これにより、リストやテーブルなどで最後の要素に特別なスタイルを適用することができます。

/* 最後の子要素にスタイルを適用 */
li:last-child {
  font-weight: bold;
}

:nth-child(n)

:nth-child(n)は要素が親要素内でn番目の子要素の場合にスタイルを適用します。nは整数または式で指定できます。この例では、奇数番目のリストアイテムに背景色が適用されています。

/* 奇数番目の子要素にスタイルを適用 */
li:nth-child(odd) {
  background-color: lightgray;
}

:nth-last-child(n)

:nth-last-child(n)は要素が親要素内で後ろからn番目の子要素の場合にスタイルを適用します。nは整数または式で指定できます。この例では、後ろから2番目のリストアイテムに太字が適用されています。

/* 後ろから2番目の子要素にスタイルを適用 */
li:nth-last-child(2) {
  font-weight: bold;
}

:not(selector)

:not(selector)は指定したセレクタに一致しない要素にスタイルが適用されます。この例では、no-boldクラスを持たない段落要素に太字が適用されています。

/* class="no-bold"を持たない要素にスタイルを適用 */
p:not(.no-bold) {
  font-weight: bold;
}

:disabled

:disabledは要素が無効化（disabled属性が設定されている）されている場合にスタイルが適用されます。これにより、ユーザーが操作できない要素を視覚的に区別することができます。

/* 無効化されたボタンにスタイルを適用 */
button:disabled {
  background-color: gray;
}

:checked

:checkedはチェックボックスやラジオボタンが選択されている状態の場合にスタイルが適用されます。これにより、選択された項目を視覚的に強調することができます。

/* 選択されたチェックボックスにスタイルを適用 */
input[type="checkbox"]:checked {
  outline: 2px solid blue;
}

:root

:rootはドキュメントのルート要素（通常は<html>要素）にスタイルが適用されます。これにより、全体のスタイルや変数を一元的に管理することができます。

/* ドキュメントのルート要素にスタイルを適用 */
:root {
  font-family: Arial, sans-serif;
}

:empty

:emptyは要素が空（子要素やテキストノードを持たない）の場合にスタイルが適用されます。これにより、空の要素を非表示にするなどの処理が可能になります。

/* 空の要素にスタイルを適用 */
div:empty {
  display: none;
}

:first-of-type

:first-of-typeは要素がその種類の兄弟要素の中で最初のものである場合にスタイルが適用されます。これにより、特定のタイプの要素に対して最初の要素だけ特別なスタイルを適用することができます。

/* 同種類の兄弟要素の中で最初の要素にスタイルを適用 */
p:first-of-type {
  font-weight: bold;
}

:last-of-type

:last-of-typeは要素がその種類の兄弟要素の中で最後のものである場合にスタイルが適用されます。これにより、特定のタイプの要素に対して最後の要素だけ特別なスタイルを適用することができます。

/* 同種類の兄弟要素の中で最後の要素にスタイルを適用 */
p:last-of-type {
  font-weight: bold;
}

疑似クラスのまとめ

疑似クラスは、要素の状態や特定の条件に基づいてスタイルを適用するためのCSSセレクタ。
コロン（:）に続けて疑似クラス名を指定することで、要素に対して状態に応じたスタイルを適用する。
:hover, :active, :nth-child(n) など、さまざまな疑似クラスがあり、ユーザーインタラクションや要素の位置に応じたスタイリングが可能。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>疑似クラスサンプル</title>
  <style>
    /* 未訪問のリンクに青色を適用 */
    a:link {
      color: blue;
    }

    /* 訪問済みのリンクに紫色を適用 */
    a:visited {
      color: purple;
    }

    /* リンクにマウスカーソルが乗っているときに赤色を適用 */
    a:hover {
      color: red;
    }

    /* リストの奇数番目の項目に背景色を適用 */
    li:nth-child(odd) {
      background-color: lightgray;
    }

    /* リストの偶数番目の項目に別の背景色を適用 */
    li:nth-child(even) {
      background-color: white;
    }
  </style>
</head>
<body>
  <h1>疑似クラスサンプル</h1>
  
  <p><a href="https://www.example.com/">Exampleリンク</a></p>
  
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
  </ul>
</body>
</html>