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

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

擬似クラスについて

記事の監修者

アバター

ena

ohsakoena

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

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する