記事の監修者
CSSで「p:hover」や「div:first-child」など「:」を使ったセレクタの指定を見ることはありませんか？
これらは擬似クラスと呼ばれるセレクタの指定方法の一つで、様々な条件をセレクタにつけることができます。
本日は、「擬似クラス」を紹介します。
擬似クラス
擬似クラスは、CSSのセレクタに付けることで要素の特定の状態を表す指定方法です。
擬似クラスは以下のように書きます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
上の例は、p要素にホバーしたとき（カーソルを上に乗せたとき）に文字を赤色にする指定方法です。
このように擬似クラスを使うと、様々な条件や状態の時にCSSを適用できます。
擬似クラスの種類
擬似クラスにはたくさんの種類があります。
今回はWeb制作でよく使う擬似クラスを紹介します。
・:hover・・・要素にカーソルが乗ったとき
・:first-child、:nth-child()、:last-child()・・・何番目の要素か
・:checked・・・チェックボックスやラジオボタンが選択されたとき
疑似要素と組み合わせるときの使い方
擬似クラスと似たものに「疑似要素」があります。
疑似要素はセレクタに「::before」や「::after」を付けて使用しますが、擬似クラスと組み合わせて使う場合は以下のように書きます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
上の指定をすると、「p要素の疑似要素::afterにカーソルが乗ったとき、文字の色を青にする」ことができます。
ポイントは、擬似クラス → 疑似要素の順番に書くことです。
逆の順番だと動作しないので注意してください。
擬似クラスはCSSの基本なので、しっかりと使いこなせるようにしましょう。
お読みいただき、ありがとうございました。
＜参考リンク＞ 擬似クラス MDN Web Docs
