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

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

＜参考リンク＞ 擬似クラス MDN Web Docs

全国どこにいても学べる！超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄