読み方：ぎじクラス

擬似クラス【pseudo-class】疑似クラス

擬似クラスとは？

CSSのクラス指定の一つで、HTML要素の「状態」や「位置」に応じてスタイルを適用するための仕組み。通常のクラスとは異なり、HTMLを書き換えることなく、動的な条件に基づいてデザインを変化させることができる。

通常のクラス指定ではHTML要素に記載されたクラス名を指定するが、擬似クラスはセレクタの末尾にコロン（:）を付けた形式で記述する。例えば、「a:hover」と書けば、リンクにマウスカーソルが重なった瞬間だけ、その要素にスタイルが適用される。HTMLのコードはそのままで、Webブラウザが要素の状態をリアルタイムに検知し、対応するスタイルを自動的に切り替える仕組みである。

擬似クラスは大きく「状態に関するもの」と「位置・構造に関するもの」に分けることができる。状態に関するものとしては、マウスが乗ったときに反応する「:hover」、リンクをクリックした瞬間に適用される「:active」、すでに訪問済みのリンクを示す「:visited」、フォームの入力欄が選択された状態を表す「:focus」などがある。これらは利用者の操作に応じてスタイルが変わるため、インタラクティブなデザインを実現するうえで広く使われている。

位置・構造に関するものとしては、親要素の中で最初の子要素を指定する「:first-child」、最後の子要素を指定する「:last-child」、奇数・偶数番目の要素を選択できる「:nth-child（）」などがある。テーブルの行を一行おきに色分けしたり、リストの先頭だけ異なるデザインにするといった指定をシンプルな記法で実現できる。

フォームの入力状態に対応する擬似クラスも用意されている。「:required」はフォームの必須項目を、「:disabled」は操作不可の入力欄を、「:checked」はチェックボックスやラジオボタンの選択状態を表す。これらを用いることで、JavaScriptに頼らずともCSSだけでフォームの状態をビジュアルで伝えることができる。