CSSの疑似クラス :link :visited :hover :activeの順番と覚え方、LOVE and HATE

ITで知っておくべき知識

2019.05.182019.04.20

CSSの疑似クラス :link :visited :hover :active の4個には、記述する順番があります。

:link、:visited、:hover、:active 疑似クラスの記述順序

:link、:visited、:hover、:active の4つの擬似クラスは、

link
visited
hover
active

の順番で記述しないといけません。

順番を論理的にてみましょう。

静的なもの link 、visited が、動的なもの hover 、active より後方に書かれていたとしましょう。

hoveやactiveをしたときに作動させたい機能を、後ろに書かれた静的なもの link 、visited が打ち消してしまうので、意図した動作になりません。

よって、静的なものを前、動的なものは後ろになります。

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

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

よって、link が先で visited は後ろになります。

同様に、active の順番は hover の後ろになります。

CSS疑似クラスのサンプルは次の通りです。

a:link { 
    color:#AAAAAA;
}

a:visited {
    color:#BBBBBB;
}

a:hover {
   color:#CCCCCC;
}

a:active {
    color:#DDDDDD;
}

a:link {

color:#AAAAAA;

}

a:visited {

color:#BBBBBB;

}

a:hover {

color:#CCCCCC;

}

a:active {

color:#DDDDDD;

}

この順番、覚えにくいですよね。。

疑似クラスの順番の覚え方は、ネットに例がありました。

頭文字を取って、LVHA ですが、意味不明ですね。

これをさらに発展させて

LOVE and HATE

とすれば、覚えれるでしょ？