HTML/CSS

aタグ 疑似クラスのCSS記述順序!覚え方は「LOVE and HATE」

aタグの疑似クラスの記述順序と覚え方は「LOVE and HATE」でOK。

「デフォルトのリンク指定と訪問済みリンク指定は下線ありで、マウスホバーした時とクリックした時は下線なしで」なんて具合に、リンクをCSSで指定するときやる、アレの正しい順番と覚え方です。

CSSに日常的に触れる人なら何を今さら感ありますが、a要素の擬似クラス指定の順番を間違えて書くと、思わぬところで躓く可能性もあります。もし知らなかったという方は、覚えておくと今後のコーディングが少し楽になる…かも。

link-visited-hover-active → LOVE and HATEで覚えよう

まず結論ですが、下記の順番でaタグの疑似要素を書く(覚える)のが吉です。

  1. link
  2. visited
  3. hover
  4. active

コードで書くと下記の順番になります。


a:link {
color: 0000ff;
}
a:visited {
color: #800080;
}
a:hover {
color: #ff0000;
}
a:active {
color: ff0000;
}

僕自身も7年(?)くらい前まだfloatとかよく理解してなかった時代、学び直しに行った学校の先生から教わったように記憶しています。

a要素の疑似クラスの順番を間違えるとどうなる?

意図しない動作、イケてない動作になることがあります。例えばリンクテキストにマウスホバーすると色を赤(#f00)に、下線無しにしたいとします。


a:link {
color: 00f;
text-decoration:underline;
}
a:hover {
color: #f00;
text-decoration:none;
}
a:active {
color: f00;
text-decoration:none;
}
a:visited {
color: #0f0;
text-decoration:underline;
}

その際、上記のようにa:visitedを最後に書いた場合、訪問済みの該当のテキストリンクにマウスホバーするとどうなるか。

より下の行に記述した指定が優先されるCSSの原則に従って、マウスホバーした際でもa:hoverの指定が実行されず、該当のリンクテキストは常にa:visitedの指定が優先されてしまいます。

結果的に常に下線が表示されてしまい、色も緑(#0f0)になってしまうため、意図した動作では実現できません。

こんな際でも、「LOVE and HATE」の記述順番を徹底することで、期待どおりの挙動になってくれます。

余談ですが、下記の記事でも「LOVE and HATE」で覚えようと提唱されていますね。

I read a comment the other day over on CSS Drive from someone named Slackerbabe that I thought was worth repeating.

Heres a cool way to remember the order of the four selectors, “LVHA (link visited hover active)”,….

Just think ‘LOVE’ (LV) and ‘HATE’ (HA)….

The selectors she is referencing is for anchor elements:
a:link
a:visited
a:hover
a:active

How To Remember The Order of Selectors: LOVE and HATE | CSS-TRICKS

僕はこう思った

今さら感もある内容でしたが、知っているとやっぱり便利なので記述しておきました。

リンクにホバーしたのに色が変わらない!画像が切り替わらない!などなどイケてない事態が起きたら、ご参考いただければ嬉しいです。