【HTML / CSS基礎】擬似クラスを使いこなそう！

2023/02/25

HTML/CSS 基礎

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の基本なので、しっかりと使いこなせるようにしましょう。

お読みいただき、ありがとうございました。