CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。
リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しましょう。
今回はこの CSS 記述順をいつも忘れるのでメモしておきます。
INDEX
目次
- リンクタグの擬似クラス :link, :visited, :hover, :active 記述順
- まとめ
リンク擬似クラス :link, :visited, :hover, :active の記述順
記事のタイトルそのままですが、:link -> :visited -> :hover -> :active の順に記述します。
サンプル CSS
[code]
a:link { color:#AAAAAA; }
a:visited { color:#BBBBBB; }
a:hover { color:#CCCCCC; }
a:active { color:#DDDDDD; }
[/code]
覚え方
擬似クラスの頭文字をとって lvha -> l(o)v(e) & h(over)a(ctive)te -> love & hateと覚えます。多少無理矢理な感じがしますが、それでもないよりはマシかと思います。
まとめ
覚え方は love & hate でしたが、この love & hate を忘れてしまっていました。
CSS の継承とリンクタグの性質をしっかり理解していれば、こう言った試験前の一夜漬けのような覚え方をしなくても自然と書けるはずなのですが、一度記事にしましたので、もう忘れることはないと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
