疑似クラス
初級読み方：ぎじクラス｜英語：Pseudo Class
要素の状態に応じてスタイルを変える仕組みだよ。例：:hover（マウスを乗せたとき）。
やさしい説明
疑似クラスとは、要素の「状態」や「位置」に応じてスタイルを適用するセレクタです。コロン（:）で始まります。
「マウスを乗せたとき色が変わるボタン」を見たことがありますよね。あれは :hover という疑似クラスで実現しています。
状態系（:hover, :focus, :active）と位置系（:first-child, :nth-child）の2種類があります。HTMLを変えずにCSSだけで動的な見た目を作れます。
具体例・使い方
/* マウスを乗せたとき */
.btn:hover { background: #0d9488; color: white; }
/* 入力欄にフォーカスしたとき */
input:focus { border-color: blue; outline: none; }
/* リストの最初の項目だけ */
li:first-child { font-weight: bold; }
/* 偶数番目の行に背景色 */
tr:nth-child(even) { background: #f9f9f9; }よく使う疑似クラス一覧
| 疑似クラス | いつ適用される？ | よく使う場面 |
|---|---|---|
:hover | マウスを乗せたとき | ボタンの色変化 |
:focus | 入力欄を選択中 | フォームの枠線強調 |
:active | クリックした瞬間 | 押した感の演出 |
:first-child | 最初の子要素 | 先頭だけ特別扱い |
:nth-child(even) | 偶数番目 | 表の縞模様 |
:disabled | 無効化された入力 | 押せないボタンをグレーに |
いつ使う？
- ボタンのホバーエフェクト（
:hover） - 入力欄のフォーカス時の枠線（
:focus） - テーブルの縞模様（
:nth-child(even)） - リストの最初/最後だけ特別なスタイル（
:first-child/:last-child）
スマホにはマウスが無いので :hover は効きにくいです。タップで反応させたいときは :active や JavaScript を併用しましょう。ホバーだけに頼った設計はスマホで「反応しない」と感じられがちです。
間違いやすいポイント
❌ 疑似クラスと疑似要素を混同する
疑似クラスはコロン1つ（:hover＝状態）、疑似要素はコロン2つ（::before＝仮想的な要素を作る）。コロンの数で見分けられます。
❌ :nth-child の数え方は1から
配列のインデックスは0からですが、:nth-child は1から数えます。:nth-child(1) が最初の要素です。0始まりと混同しないよう注意。
よくある疑問
Q: 疑似クラスと疑似要素の違いは？
A: 疑似クラスは「状態」（:hover, :focus, :first-child等）、疑似要素は「仮想的な要素」（::before, ::after等）を指します。コロンの数も違います。
Q: よく使う疑似クラスは？
A: :hover（マウスオーバー）、:focus（フォーカス時）、:first-child（最初の子）、:last-child（最後の子）、:nth-child()（n番目の子）が頻出です。
Q: :hoverがスマホで効かないのはなぜ？
A: スマホにはマウスカーソルがないため:hoverが正しく動きません。@media (hover: hover) { } の中に書くか、タッチデバイスでは:activeを使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →