疑似クラス
初級読み方：ぎじクラス｜英語：Pseudo Class
要素の状態に応じてスタイルを変える仕組みだよ。例：:hover（マウスを乗せたとき）。いつ使う？ ボタンにマウスを乗せたとき色を変えたい(:hover)、リンクを訪問済みにしたい(:visited)、最初の子要素だけスタイルを変えたい(:first-child)ときに使うよ。間違いやすいポイント: セレクタと疑似クラスの間にスペースを入れるとNG。.btn:hover（正しい）と .btn :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; }いつ使う？
ボタンのホバーエフェクト、入力欄のフォーカススタイル、テーブルの縞模様、リストの最初/最後だけ特別なスタイルを当てるときに使います。
間違いやすいポイント
❌ 疑似クラスと疑似要素を混同する
疑似クラスはコロン1つ（:hover）、疑似要素はコロン2つ（::before）です。疑似クラスは「状態」、疑似要素は「仮想的な要素を作る」ものです。
よくある疑問
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を使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →