擬似クラス（ link 、visited 、hover 、active ）の記述順序

擬似クラスとは

特定の事象や状態を持つ要素に対して、違ったスタイルを適用できるセレクタ。

4つの擬似クラス

a 要素のリンクデザインをする際には、下記の4つの擬似クラスを用いることが多い。

CSS ルールにおいて、セレクタの固有性は4つとも同じなので、同じプロパティに異なる値が指定されている場合、原則として後方に書かれた指定に上書きされる。

なので、4つの擬似クラスは、記述の順番を守らないと、ひとつの疑似クラスが他の疑似クラスを無効化してしまい、意図した結果にならないことがある。

CSS の固有性（詳細度）とは、セレクタの強さ（優先性）を表す。

4つの擬似クラスの内容

link は何もしなくても、そこにリンクがある状態を分かりやすく示すためのもので、visited は、そのリンク先をすでに見た状態を示すためのものなので、2つとも動作が作動する前と作動した後の静的な状態を表すものになる。

hover は、マウスオーバーをしたときの作動状態、active も、クリックしたときの作動状態というユーザーの動作によって作動する機能で、この2つは動的な状態を表すものになる。

結果、4つの疑似クラスは、静的なものと動的なものの2種類に分けられる。

静的な疑似クラスと動的な疑似クラスの記述順序

静的なもの link 、visited が、動的なもの hover 、active より後方に書かれていると、hover （マウスオーバー）やactive（クリック）をしたときに作動させたい機能を、後ろに書かれた静的なもの link 、visited が打ち消してしまうので、意図した動作にならない。

だから、静的なものを前、動的なものは後ろに書かなければならない。

※特に color プロパティは効かなくなる。

次に、静的なものの link と visited の順番は、visited が link の後ろになる。

当たり前だけど、a; からリンク先のページを開かないと、その a; は visited = 訪問済み にはならない。

だから、link が先で visited は後ろ。

同様に、active の順番は hover の後ろになる。

これも、hover （マウスオーバー）しなければ active（クリック）できないから、hover が前で active は後ろ。

ただし、link と visited は打ち消しあうことがないので順番はどっちでも大丈夫。

4つの擬似クラスの記述順序

上記のように link 、visited 、hover 、active という順番で記述すれば、a 要素のリンクデザインは意図通りになる。

順番の覚え方は、海外では、

[ ‘ LOVE ’ (LV) and ‘ HATE ’ (HA) = 愛と憎しみ ]

というふうに覚える人が多いとのこと。