こんにちは、mickです。
・CSSで擬似クラスのhoverとか記述してるのに効かない
・a:hoverが効かなくていくつも書いてしまった
こんな問題を解決していきます。
CSSの疑似クラス
CSSの疑似クラスは、セレクタに対して特定の状況で特定の動きをするように指定します。
英語では「Pseudo-classes」。
「pseudo」をネットにあるネイティブ発音で聴くと「スゥドゥ」とか「スダゥ」というように聞こえます。
このとき「p」の発音はありません。
英語の発音ルール（フォニックス）にこんなのがあります。
「psから始まる単語のpは発音しない」
pseudoもこれに当てはまりますね。
ここでちょっと余談。
心理学「psychology」も同じルールで「p」を発音しません。
だいたい「サイコロジー」と聞こえていると思います。
疑似クラスの具体例をa要素でみてみる
「セレクタに対して特定の状況で特定の動きをする」ではわかりにくいですね。
そこで具体的に書いてみます。
疑似クラスの書き方はこちら。
[セレクタ][疑似クラス]
例えば、セレクタをa要素とした例がこちらになります。
- a:linkでは「まだリンク先を見ていないリンク」
- a:visitedでは「一度リンク先を見たことがあるリンク」
- a:hoverでは「カーソルが上にあるリンク」
- a:activeでは「押されている最中であるリンク」
このようにリンクのa要素（セレクタ）に対してカーソルが上にある（特定の状況）で色を付ける（特定の動きをする）ということになります。
a:hoverが効かない理由
a:hoverが効かない理由を紹介していきます。
記述には順序がある
a:hoverなどが効かない理由。
それは記述の順序です。
- a:link
- a:visited
- a:hover
- a:active
この順序でCSSを記述することが大切です。
「リンク（link）で訪れる（visited）にはカーソルでさまよって（hover）クリック（active）！」
もっと短いのがいいですね。
LiViHA！（リヴィハ！）
なんだか響きが良くないですか。
Li（nk）Vi（sited）H（over）A（ctive）！（リヴィハ！）
記述に順序があるのはCSSがあと優先だから
CSSにはあとに記述した内容を優先する、というルールがあります。
普段なら疑似クラスの順序を気にすることはないのです。
ところが、マウスカーソルを操作するといった「ユーザーが動作」によってちょっとした状況が生まれます。
擬似クラスで指定した状態が同時に起こる
a:link、a:visited、a:hover、a:activeについて話しを進めます。
ユーザーが「操作をする」ことによって擬似クラスで指定した状態が同時に起きます。
2つの状態が同時に起こる
- リンク先を見たことないリンク（:link）かつマウスカーソルがリンクの上にある（:hover）
- リンク先を見たことあるリンク（:visited）かつマウスカーソルがリンクの上にある（:hover）
3つの状態が同時に起こる
- リンク先を見たことないリンク（:link）かつマウスカーソルがリンクの上にある（:hover）かつリンクをクリックしている最中（:active）
- リンク先を見たことあるリンク（:visited）かつマウスカーソルがリンクの上にある（:hover）かつリンクをクリックしている最中（:active）
このように擬似クラスで指定した状態が同時に起きた場合、CSSのルールに従うと、最後に記述したことが優先されます。
サンプル
理想的な順序（a:link、a:visited、a:hover、a:active）
a:visitedを最後に書いてしまって一度リンクを踏むとまったく色が変わらない（a:link、a:hover、a:active、a:visited）
a:active、a:hoverの順に書いてしまってリンクを押しても色が変わらない（a:link、a:visited、a:active、a:hover）
※ページ内にリンクを張っているためか、a:linkがうまく再現できてません。すみません。
まとめ。
CSSの擬似クラス、特にa:hoverなどが効かなくなることを解決する方法を紹介しました。
記述の順番を間違ってもCSSの記述ルールでは間違っていないので、エラーにならないのが発見が遅れる原因ですね。
a要素に付ける:hoverなどの順序は大切。LiViHA！です。
- a:link
- a:visited
- a:hover
- a:active
CSSでトラブルがあったときは、CSSは記述はあと優先、ということもう一度思い出したいです。
以上、みなさまの助けなれば幸いです。
初稿 2020/09/14
