---
title: "擬似クラスとは？:hoverや:first-childでスタイルを切り替える基礎"
description: "ホバーや「最初の要素だけ」といった状態・位置に応じてスタイルを変えたい場面で役立つ擬似クラス。:hoverや:first-childを起点に、どんな条件を拾えるのかを代表例とともに基礎から解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/pseudo-class-term"
markdown: "https://giga-site.com/articles/pseudo-class-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 擬似クラスとは？:hoverや:first-childでスタイルを切り替える基礎

ボタンにマウスを乗せると色が変わる、リストの最初の項目だけ装飾を変える。こうした切り替えを実現するのが擬似クラスです。要素の状態や位置に応じてスタイルを当てられる便利な仕組みを、基礎から代表例まで見ていきましょう。

> Source HTML: https://giga-site.com/articles/pseudo-class-term
> Article index: https://giga-site.com/articles/index.md

## 擬似クラスとは何か

擬似クラスとは、要素の特定の状態や位置を条件にしてスタイルを当てるための指定方法です。セレクタの後ろにコロンと条件名を付けて書き、その条件が成り立つときだけスタイルが適用されます。

通常のクラスはHTML側で付ける必要がありますが、擬似クラスはマウスの状態や要素の並び順といった、HTMLに直接書かれていない情報を条件にできるのが大きな特徴です。

これにより、ユーザーの操作に応じた反応や、構造上の位置に基づく装飾を、CSSだけで実現できます。動きのある見た目づくりの基礎となる仕組みです。

## 状態を条件にする擬似クラス

代表的なのが、マウスを乗せた状態を条件にする指定です。ボタンやリンクにマウスが重なったときだけ色や下線を変えるといった、操作への反応を表現できます。

ほかにも、リンクがクリックされている瞬間や、入力欄が選択されている状態など、利用者の操作に応じた状態を条件にできます。インタラクションの手応えを伝えるのに役立ちます。

状態を条件にするスタイルは、利用者にいま操作できる場所や反応していることを伝える役割があります。使いやすさにも関わる大切な要素です。

## 実務ではどこで関係する？

擬似クラスは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

擬似クラスについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 位置を条件にする擬似クラス

要素の並び順を条件にする擬似クラスもあります。同じ親の中で最初の子要素や最後の子要素だけにスタイルを当てたり、何番目かを指定して特定の位置を狙ったりできます。

たとえばリストの最初の項目だけ上の枠線を消す、表の偶数行だけ背景色を変える、といった指定がHTMLを変えずに実現できます。構造に沿った装飾を効率よく書けます。

順番を指定する条件では、奇数や偶数といったまとまりを表す書き方もでき、縞模様のような繰り返し装飾を簡潔に表現できます。

## ホバー効果を付ける手順

もっとも使う機会の多いホバー効果を例に、擬似クラスの基本的な使い方を確認します。次の手順で実装できます。

1. スタイルを変えたいボタンやリンクのセレクタを用意する
2. そのセレクタの後ろにコロンとホバーの条件名を付ける
3. マウスを乗せたときに変えたい色や装飾を宣言する
4. 通常時のスタイルとの差がわかるように指定する
5. 実際にマウスを乗せて切り替わりを確認する

## 使うときの注意点

状態を条件にする擬似クラスは、適用される順序に決まりがある場合があります。たとえばリンクの各状態を指定するときは、書く順番によって意図通りに効かないことがあるため、推奨される順序に従うのが安心です。

また、マウス操作を前提にしたホバー効果は、タッチ操作の端末では同じようには働きません。重要な情報をホバーでしか見せない作りは避け、誰でも操作できる設計を心がけることが大切です。

## 切り替え動作を共有して確認する

ホバーや位置に応じた装飾は、実際に操作してみないと挙動を確認しにくいものです。試作をチームやクライアントに触ってもらいたいとき、ギガサイト便ならHTMLやZIPをドロップするだけで共有URLを発行でき、その場で動きを試してもらえます。

一時公開ページにはnoindexが付いて検索結果には出ません。関係者以外に見せたくない場合は、パスワードやメール認証を併用すると安心して共有できます。

## よくある質問

### 擬似クラスと普通のクラスは何が違いますか？

普通のクラスはHTML側で要素に付ける必要がありますが、擬似クラスはマウスの状態や要素の並び順など、HTMLに直接書かれていない情報を条件にできます。状態や位置に応じた切り替えをCSSだけで実現できます。

### ホバー効果がスマホで効かないのはなぜですか？

ホバーはマウスを乗せた状態を前提にした条件で、タッチ操作の端末では同じようには働きません。重要な情報をホバーでしか見せない作りは避け、タッチでも操作できる設計にすることが大切です。

### 最初や最後の要素だけにスタイルを当てられますか？

当てられます。同じ親の中の最初の子要素や最後の子要素を条件にする擬似クラスを使えば、HTMLを変えずに位置に応じた装飾ができます。何番目かを指定して特定の位置を狙うこともできます。

### 擬似クラスを書く順序に決まりはありますか？

状態を条件にする一部の擬似クラスは、書く順序によって意図通りに効かないことがあります。とくにリンクの各状態を指定するときは、推奨される順序に従って書くと安定して動作します。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [擬似クラスとは？hoverやfocusで変化するCSSの基礎](https://giga-site.com/articles/what-is-pseudo-class/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)
- [メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎](https://giga-site.com/articles/media-query-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [ボックスモデルとは？余白・枠・幅の関係をやさしく解説](https://giga-site.com/articles/box-model-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "擬似クラスとは？:hoverや:first-childでスタイルを切り替える基礎",
  "description": "ホバーや「最初の要素だけ」といった状態・位置に応じてスタイルを変えたい場面で役立つ擬似クラス。:hoverや:first-childを起点に、どんな条件を拾えるのかを代表例とともに基礎から解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/pseudo-class-term",
  "url": "https://giga-site.com/articles/pseudo-class-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "擬似クラスと普通のクラスは何が違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "普通のクラスはHTML側で要素に付ける必要がありますが、擬似クラスはマウスの状態や要素の並び順など、HTMLに直接書かれていない情報を条件にできます。状態や位置に応じた切り替えをCSSだけで実現できます。"
      }
    },
    {
      "@type": "Question",
      "name": "ホバー効果がスマホで効かないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ホバーはマウスを乗せた状態を前提にした条件で、タッチ操作の端末では同じようには働きません。重要な情報をホバーでしか見せない作りは避け、タッチでも操作できる設計にすることが大切です。"
      }
    },
    {
      "@type": "Question",
      "name": "最初や最後の要素だけにスタイルを当てられますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "当てられます。同じ親の中の最初の子要素や最後の子要素を条件にする擬似クラスを使えば、HTMLを変えずに位置に応じた装飾ができます。何番目かを指定して特定の位置を狙うこともできます。"
      }
    },
    {
      "@type": "Question",
      "name": "擬似クラスを書く順序に決まりはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "状態を条件にする一部の擬似クラスは、書く順序によって意図通りに効かないことがあります。とくにリンクの各状態を指定するときは、推奨される順序に従って書くと安定して動作します。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```