【CSS】擬似クラスと擬似要素を複数指定するには？

2020年2月15日HTML・CSS

きらり

結耶。この間教えてくれた「カテゴリーのカスタマイズ」をしたんだけど、アイコンの色を変えたくてアイコンに色を付けたらホバーのときにアイコンの色が変わらないんだけど…

結耶

ああ～a(リンク)に対してホバー時の指定してるけどアイコンに対しては指定してないからね。アイコンに対してホバー指定すればできるよ。

きらり

そう思ってやってみたけど…できなかったよ(T^T)

結耶

「擬似クラス」と「擬似要素」の指定の書き方がきっと間違えてるんだね。じゃあ、今日は「擬似クラスと擬似要素を複数指定する方法」について勉強してみよう！

Contents

1. 擬似クラスと擬似要素
2. 擬似クラスと擬似要素を複数指定する方法
3. 最後に

擬似クラスと擬似要素

結耶

きらりくん、前に擬似クラスと擬似要素の勉強をしたけど覚えてるかな？

きらり

えっと…擬似クラスは特定の要素に対して指定するもので、擬似要素は特定の場所や文字などにスタイルを指定するものだよね。

前に擬似クラスと擬似要素の違いについて書きました。

【CSS】擬似要素と擬似クラスの違い | きらり☆彡

結耶きらりは擬似要素と擬似クラスの違いって知ってる？きらり擬似要素と擬似クラスの違い？知らな ...

https://kirari-yums.net/2020/02/03/post-11112/

主な擬似要素は「:before」「after」、擬似クラスは「visited」や「hover」などがあります。

そこで冒頭での会話について説明すると…

サンプル

a:before {
    font-family:"Font Awesome 5 Free";
    content:"f0c1";
    color:red;
    margin-right:8px;
}

a:hover {
    background:blue;
    color:white;
}

aタグに擬似要素:beforeでアイコンをつけアイコンの色を赤色にして、擬似クラスの:hoverでホバー(マウスが乗ったとき)に背景色と文字色が変わるように設定しています。

上のサンプルにマウスを乗せてみると、文字の色は変わってもアイコンの色が変わらないのがわかると思います。

これはホバー時の指定がaタグに対してありますが、アイコン部分a:beforeに対してホバー時の指定がしていないからです。アイコンもホバー時に色を変えたいばあはアイコン部分のa:beforeに対してホバー指定をすればできます。

きらり

ボクもそう思ってやってみたけど変わらなかったよ！

結耶

擬似クラスと擬似要素の指定の仕方が間違ってたんだね～。擬似クラスと擬似要素を両方指定するには決まりがあるんだよ。ということで次の章では今回の記事の本題「擬似クラスと擬似要素を複数指定する方法」を説明するよ！

擬似クラスと擬似要素を複数指定する方法

上で書いたアイコン部分a:beforeにホバー指定を例で説明します。

「アイコン部分a:beforeにホバー:hover指定をする」と言うと

a:before:hover

こんな風に書いてしまいます。ですがこれは間違いなんです！

きらり

ボクこうやって書いたよ。これはダメなの？

結耶

うん。これは間違いだね。正しくはこう書くんだよ。

要素:擬似クラス:擬似要素

正しい書き方は「擬似クラス」を先に書き、擬似クラスと擬似要素の間にスペースを入れないで続けて「擬似要素」を後に書きます。なので先ほどの間違いは「:hover」が擬似クラス、「:before」が擬似要素なので

a:hover:before

と書くのが正解となります。そしてサンプルにアイコンのホバー指定をしてみると

サンプル

a:before {
    font-family:"Font Awesome 5 Free";
    content:"f0c1";
    color:red;
    margin-right:8px;
}

a:hover , a:hover:before {
    background:blue;
    color:white;
}

結耶

これでホバーのときにアイコンも色が変わります。

きらり

本当だー！変わった～！そっか擬似クラスを先に書くんだね！