CSSの世界で「疑似クラス」と聞いて真っ先に思い浮かぶのは、::before や ::after という人が多いのではないでしょうか？

確かに、これらは装飾的な要素を追加したり、アイコンを表示したりするのにとても便利です。でも実は、CSSにはそれ以外にも便利な疑似クラスがたくさん用意されているんです。

この記事では、意外と見落とされがちな疑似クラスをピックアップしてご紹介します！ちょっとした工夫で、HTMLを汚さずにスマートなデザインが実現できますよ。

知っていると便利な疑似クラスたち

:hover / :focus / :active - ユーザー操作に応じた変化

button:hover {
  background-color: #eee;
}

:hover は、要素にマウスカーソルを乗せたときに適用されます。
→ 上記では、button にマウスを重ねると背景色が薄いグレーに変わります。

input:focus {
  border-color: blue;
}

:focus は、フォームにカーソルが入ったとき（フォーカスされたとき）に適用されます。
→ 上記では、フォーカスされた input のボーダーが青になります。

:first-child / :last-child / :nth-child(n) - 要素の位置によってスタイルを変える

ul li:first-child {
  font-weight: bold;
}

:first-child は、親要素内で最初の子要素に適用されます。
→ 上記では、最初の li 要素の文字を太字にします。

ul li:nth-child(2n) {
  background-color: #f9f9f9;
}

:nth-child(2n) は、2の倍数番目（偶数）の要素に適用されます。
→ 上記では、偶数番目のリストに背景色をつけて交互のスタイルにしています。（※2n は even でもOK）

:not() - 否定条件に使える

button:not(.primary) {
  background-color: gray;
}

:not() は、特定の条件を除外してスタイルを適用したいときに使います。
→ 上記では、.primary クラスがついていない button に灰色の背景が適用されます。

:empty - 中身がない要素にだけ適用

p:empty {
  display: none;
}

:empty は、中身のない要素にスタイルを適用するための疑似クラスです。
→ 上記では、空の <p> タグを非表示にして余分なスペースを削除します。

:checked - チェック状態のフォーム要素に反応

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

:checked は、チェックされた input 要素に適用されます。
→ 上記では、チェックされた項目に隣接する label に打ち消し線を表示します。

:disabled / :enabled / :required - フォームの状態に応じたスタイル

input:disabled {
  background-color: #ddd;
}

:disabled は、無効状態のフォーム要素に適用されます。
→ 上記では、操作できない input の背景をグレーにしています。

input:required {
  border-color: red;
}

:required は、必須入力の input に適用されます。
→ 上記では、入力が必須のフィールドに赤いボーダーを表示して注意を促します。

おまけ：フォーム系疑似クラスまとめ

まとめ

疑似クラスを使いこなすことで、JavaScriptを使わずとも動きのあるUIや、状態に応じたスタイルをスマートに実装できます。

HTMLはシンプルに、CSSは賢く。
そんなスタイルの設計ができるようになると、フロントエンド開発がますます楽しくなりますよ！