NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

:link :visited :hover :activeの記述順

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1273日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

所謂擬似クラスですね。

aタグにくっつけて、マウスオーバーの状態かとか、訪問済みかで色や下線をだしわけるといった時に使う、かなり使用頻度の高い子たちです。

んで、これなんですが、実は正しい記述順序というのがあるそうで、それを守らないと意図したとおりに動作してくれないんですよね。

具体的には、

 みたいなかんじで、「link → visited → hover → active」の順で書いて行かないといけない。

なんでだろ?と思っていろいろ調べたところ、セレクタの固有性はすべて同じだからなんだそう。

つまり、あくまでどれも「a」タグに対する記述なので、最後に書いたものから(下から順に)優先されてくるため、例えば、「link→active→hover→visited」といった書き方をしていた場合、

  • 未訪問リンクの場合、activeよりhoverが優先されるためactiveが無効になってしまう
  • 訪問済みの場合はactiveよりもvisitedが優先されるため、hoverやactiveが効かなくなる。

なので、activeはhoverより後ろに書かないと意味がなくなってしまい、
更に、visitedはactiveやhoverより前に書かないといけない。

でもlinkとvisitedは打ち消し合わないため、ここはどっちでもいいらしい。

ということで、まとめると、「link→visited→hover→active」という順に書くのが正解ということになるんだそうです。

恥ずかしながら実はこれ、知らなかったんですよね。。もっと気をつけて、意識して書いていこうと思います。

ちなみにこの順番の覚え方として、海外では

LOVE and HATE

なんて覚え方があったりするそうですよ。

TAGS