スポンサーリンク

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

HTML・CSS

きらり
きらり

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

結耶
結耶

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

きらり
きらり

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

結耶
結耶

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

スポンサーリンク

擬似クラスと擬似要素

結耶
結耶

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

きらり
きらり

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

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

主な擬似要素は「: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;
}
結耶
結耶

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

きらり
きらり

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

最後に

今回は擬似クラスと擬似要素を複数指定する方法について書いてみました。

使いどころはあまりないかもしれません。ですが、いざという時にこの記事を思い出してもらえると嬉しいです。

擬似クラスと擬似要素はいろいろあります。正しい書き方をしてユーザーにわかりやすいサイトになりますように!

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。