少し高度なCSS文法: 擬似クラス

みなさまどうも。いかがお過ごしでしょうか。

続きまして『擬似クラス』について勉強していきましょう。

擬似クラスはとっても強力なセレクタの記述方法です。コンテンツ作成の幅が どーんと広がるのでバッチリ覚えてしまってください。

CSS2の時点で存在している擬似クラスは以下のものがあります。

• :hover
• :active
• :link
• :visited

昨今のCSS3では擬似クラスがかなり追加されたのですが、当記事では上記の4つについて解説していきます。

まずどういったことができるのか、ということですが以下の要素にカーソルを当ててみてください。カーソルというのはみなさんがマウスとかタッチパッドとかを動かすと連動して動く矢印みたいなやつのことです。

ここにカーソルを当てる

カーソルが当たると文字色が変更になったのが確認できたと思います。これは擬似クラスの『:hover』を使用して実装できます。

さらにこういったこともできます。

なんとカーソルを当てると画像が変更されました、かなりハイカラですね。これも『:hover』を使用して実装しています。

(´-`).｡oO（画像はいつもお世話になっている写真素材ぱくたそ様より拝借しております。)
(´-`).｡oO（あ、あとスマホだとマウスカーソルそのものが存在しませんので上記のサンプル動かねえっす...)

擬似クラスを使用するとこのようなちょっとした動的な演出を追加することができます。

擬似クラスの基本的な文法は以下のような感じで、要素のとなりに擬似クラスを記述すればOKです。半角スペースなど入ってはダメですので間に何も挟まずに記述してください。以下はspan要素に『:hover』をくっつけた例です。

span:hover {
    color: red;
}

基本的な文法はそんなに難しくないかと思います。

というわけで各擬似クラスそれぞれの実装方法を確認していきましょう。まずは先程も登場した『:hover』から解説を進めたいと思います。『:hover』はマウスオーバーされている間のCSSデザインを変更することができる擬似クラスです。

以下にサンプルを仕込みしてみましたので試してみてください。色が変わりましたでしょうか。

ここにカーソルを当てる

この『:hover』の実装方法は要素に『:hover』と続けて記述し、その宣言ブロックにマウスオーバーしている間に反映させたいCSSの宣言を記述すればOKです。先ほどのような画像の切り替えを行いたい場合は以下のように記述します。

p {
    background-image: url(https://wp-p.info/reps/css-intermediate/img/04_01.jpg);
    width: 640px;
    height: 354px;
}
p:hover {
    background-image: url(https://wp-p.info/reps/css-intermediate/img/04_02.jpg);
}

注目すべきはbackground-imageプロパティの値ですね。元々のセレクタと『:hover』が付いたセレクタ両方でbackground-imageプロパティが記述されています。こうすることでマウスオーバー時に背景画像を切り替えることができるといった感じです。
※background-imageプロパティを忘れちゃった方はこちらへどぞ。

続いて応用編として、親要素のイベントを子孫要素に引き継いで処理を追加させることができます。以下の例をみてください。

p {
    background-color: blue;
    width: 100%:
    height: 200px;
}
p span {
    color: white;
}
p span:hover {
    color: red;
}

まずspan要素の初期値として文字色を白色に設定、マウスオーバーされたら文字色を赤色に変更するという記述です。

以下にちょっとしたサンプルを作ってみましたので確認してみましょう。

ここにマウスカーソルを当てて！

これはこれでOKです。しかしspan要素は要素自体が小さいのでちょっとマウスオーバーしづらいです。なのでその親要素であるp要素がマウスオーバーされたらその子要素のspan要素の文字色を変更する演出に変更したくなったとします。

その場合は以下のように記述すれば実装が可能です。

p {
    background-color: blue;
    width: 100%:
    height: 200px;
}
p span {
    color: white;
}
p:hover span {
    color: red;
}

以下がサンプルです。p要素(今回は青いところ全部)にマウスオーバーしてみてください。その子要素のspan要素の文字色が変更されたと思います。

ここにマウスカーソルを当てて！

ポイントは『p span:hover』という部分が『p:hover span』に変更されているという事です。『p:hover span』と記述すると『p要素がマウスオーバーされたときにその子要素のspan要素のCSSが変更される』という処理になります。このような感じで親要素のイベントから子要素のデザインを変更させることができますので中々便利です。バッチリ覚えちゃいましょう。

ただし、子要素のイベントを逆に親要素に引き継いで処理させたり、親子関係や兄弟要素でない全く違うところにいる要素のデザインを変更させたりすることは今のCSSでは出来ません。その場合はJavaScriptを使用すると実装可能ですが当記事はCSS編ですのでその解説は当記事では割愛します。こちらも覚えておいてください。

続いて『:active』について解説します。こちらはクリックイベントになります。擬似クラス『:active』でクリックされているときのCSSデザインを指定することができます。記述例は以下のような形ですね。

span {
    color: blue;
}
span:active {
    color: red;
}

以下に実装してみましたのでクリックしてみてください。色の変更が確認できるかと思います。

ここをクリックして！

これが擬似クラス『:active』になります。ではちょっと応用編です。先ほどの画像切り替えを『:active』で実装してみましょう。先程はマウスオーバーで画像切り替えが行われましたが今度はクリックで変更するようになるはずですね。記述は以下になります。

p {
    background-image: url(https://wp-p.info/reps/css-intermediate/img/04_01.jpg);
    width: 640px;
    height: 354px;
}
p:active {
    background-image: url(https://wp-p.info/reps/css-intermediate/img/04_02.jpg);
}

というわけで以下がサンプルです。クリックしてみてください。

どうでしょうか。ちょっとオシャレなウェブサイトが作れそうな気がしてきますよね。

次に『:link』と『:visited』について解説します。これはリンク先が未訪問の場合と訪問済みの場合のCSSデザインを変更するプロパティです。

リンク先、ということで主にa要素で使われる擬似クラスになります。

記述例はこんな感じです。

a:link {
    color: purple;
}

a:visited {
    color: pink;
}

以下にサンプルを用意しました。クリックした後にこのページに戻ってきてみてください。訪問してない場合の色が紫色で、訪問して帰ってきたあとはピンク色に変わってるはずです。

https://www.google.co.jp/

http://www.yahoo.co.jp/

いかがでしょう。というわけで基本的な擬似クラスはこんな感じで実装します。

擬似クラスでよく使用されるのはやっぱり『:hover』ですね。記述方法は似たり寄ったりなので『:hover』あたりの処理が書けるようになれば他の擬似クラスも簡単に書けるようになるかと思います。

ちょっと注意点があるのですが、これらの擬似クラスは順番の概念が存在します。同じ要素に対して様々な擬似クラスが記述されていた場合に記述順によっては反映されないことがあるということです。

この理由はブラウザ上のイベントは同じ行動の延長線上にあることが多いからです。

例えばマウスオーバーとクリックを比べてみましょう。物理的な話でクリックは要素の上にカーソルを重ねてからクリックボタンを押す、という行動になりますね。つまりマウスオーバーも同時に行っちゃってる、という事です。

CSSでは詳細度が同じ場合は後述してある記述が優先となります。ですので『:active』の後に『:hover』を記述すると同じイベントの延長線にある以上、『:hover』の値が優先され『:active』の値は反映されません。
※詳細度については長くなるので別の記事で解説していきます。

以下の記述をみてください。この順番で記述すると『:hover』のCSSプロパティが優先され、『:active』のCSSプロパティは無視されます。

p:active {
    color: purple;
}
p:hover {
    color: red;
}

以下にサンプルを用意しましたのでクリックしてみましょう。クリックしても『:active』で指定した紫色に変更されることはないかと思います。

ここにマウスカーソル当てたりクリックしたりしてみて！

というわけで全てのイベント処理を並行して発生させるには以下の順番で記述する必要があります。この順番ならば全ての擬似クラスが実装できます。

:link → :visited → :hover → :active

『LVHAの順番』と覚えると覚えやすいかもしれません。これ私の造語ですので公式なものではありませんのでそこはご注意です。

というわけで以下がサンプルソースで、

a:link {
    color: purple;
}
a:visited {
    color: pink;
}
a:hover {
    color: red;
}
a:active {
    color: orange;
}

以下が全ての擬似クラスを兼ね備えた最強のa要素です。

https://www.apple.com/jp/

(´-`).｡oO（ちなみにa要素はクリックし終わるとページ遷移しちゃいますので...)
(´-`).｡oO（軽くクリックし続けてくださいませ...)
(´-`).｡oO（そうすれば『:active』の動作が確認できるかと思います...)
(´-`).｡oO（あとアップルさんのウェブサイトにすでに訪問済みの方は...)
(´-`).｡oO（すでに『:visited』が発動しているので...)
(´-`).｡oO（ブラウザを変えるかキャッシュクリアして頂ければと思います...)

このように、順番が存在することを知らないと
「擬似クラス書いたのに効かないよ...CSSちゃんの嘘つき...(´；ω；｀)」
となってしまいがちなので忘れないようにしてください。他の人が書いたCSSソースに追記するときとか意外とハマります。要注意です。

というわけでちょっと長くなってしまいましたが以上です。イベント処理は非常に有用性が高いのでバッチリマスターしちゃいましょう。

次の記事ではmarginとpaddingについて勉強します。マイペースで良いのでゆっくり勉強していきましょうね。

ではではー。