CSS: リンク擬似クラス :link, :visited, :hover, :active の記述順

CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。
リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しましょう。

今回はこの CSS 記述順をいつも忘れるのでメモしておきます。

目次

  • リンクタグの擬似クラス :link, :visited, :hover, :active 記述順
  • まとめ

リンク擬似クラス :link, :visited, :hover, :active の記述順

記事のタイトルそのままですが、:link -> :visited -> :hover -> :active の順に記述します。

サンプル CSS

a:link { color:#AAAAAA; }
a:visited { color:#BBBBBB; }
a:hover { color:#CCCCCC; }
a:active { color:#DDDDDD; }

覚え方

擬似クラスの頭文字をとって lvha -> l(o)v(e) & h(over)a(ctive)te -> love & hateと覚えます。多少無理矢理な感じがしますが、それでもないよりはマシかと思います。

まとめ

覚え方は love & hate でしたが、この love & hate を忘れてしまっていました。
CSS の継承とリンクタグの性質をしっかり理解していれば、こう言った試験前の一夜漬けのような覚え方をしなくても自然と書けるはずなのですが、一度記事にしましたので、もう忘れることはないと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents