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

スポンサーリンク
ITで知っておくべき知識

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疑似クラスのサンプルは次の通りです。

CSS疑似クラスの順番の覚え方

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

 

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

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

 

これをさらに発展させて

LOVE and HATE

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

 

 

 

コメント

タイトルとURLをコピーしました