疑似クラス = psuedo = スゥダ と発音します。何だか、日本人には馴染みにくいですね。
ギリシャ語がルーツの様です。[ p ]の発音が無視されているのがその特徴のひとつでしょう。
元々「偽の、間違った、非現実的な、装った」といった意味があります。
だからといって、疑似クラス、ってのもあんまりピンと来ませんが…
さて、CSS の 疑似クラス [ a: ~~~ ] が上手く機能しない事があります。
そんな時は、これをチェックすること。
この疑似クラスの記述順にはルールがあります。
a : link { : ; }
a : visited { : ; }
a : hover { : ; }
a : active { : ; }
LVHA の順です。
この順番を守らないと、ひとつの疑似クラスが他の疑似クラスを”無効化”してしまい、きちんと機能しなくなります。
どうしてそんなことになるのか？考えてみましょう。
①a : link, a : visited, a : hover, a : active は<a>タグに作用するという同じ特徴を持っています。
②link は何もしなくても、そこにリンクがある状態を分かりやすく示すため。visited は、そのリンク先をすでに見た状態を示すため。→ 静的なもの。
hover と active は、マウスオーバーやクリックといったユーザーの動作によって作動する機能。→ 動的なもの。
③そしてCSSルールは、同じグループの中では後に記述されたスタイルが優先されます。
まず、visited は link の後ろです。だって、<a>からリンク先のサイト/ページを開かないと、その<a>は visited = 訪問済み にはなりませんよね。だから、link が先、visited は後です。
と言いつつ、色々試したところ実はこの２つの順序は関係無い様です。
自然な流れとして、link が先としましょう。
この時点で、
a : link
a : visited
の順番が決まります。
次に、hover は link と visited の後に記述しなければいけません。
逆になると、CSSルールによって hover の特に color プロパティが効かなくなります。ユーザーがマウスオーバーしても、テキストの色が変わらない、となります。
だから、
a : link
a : visited
a : hover
の順序です。
最後に、active の順番は hover の後ろです。というのも、hover = マウスオーバー しなければ active = クリック できませんよね。CSSルールは、同じグループ内では下に記述されたクラスを優先するので、[ hover = マウスオーバー した後、active = クリック のプロパティが表に出てくるように記述 ] しなければならないわけです。
逆さまに記述すると、マウスオーバー のプロパティが優先されてマウスオーバーのスタイルは表示されるけど、クリックの(color)プロパティが隠されてクリックしても変化なし、となってしまいます。
これで、
a : link
a : visited
a : hover
a : active
の順番が出揃いました！
See the Pen.
順番の覚え方ですが、英語圏では
[ LoVe HAte = 愛と憎しみ ]
というふうに覚えるそうです。他にも色々ありましたが、これが一番短くて一般的みたいです。
みなさんも自分の覚え方を試してみてはいかがでしょう？
