aタグ疑似クラスのCSS記述順序！覚え方は「LOVE and HATE」 - tanabota（タナボタ）

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

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

🍎Apple製品を購入検討中の方へ

只今Amazon公式のApple製品ポイント還元率がすごいことになっています。検討中ならぜひチェックしてみてください。
※人気で品切れの製品も多いですが、還元率も頻繁に変わるので早めにチェックが吉です。

💻MacBook Air (M1) ｜ 💻MacBook Pro(M1) ｜ Mac mini(M1)

📱無印iPad ｜ 📱11インチiPad Pro ｜ 📱iPad Air ｜ 📱iPad mini ｜ 📱12.9インチiPad Pro

⌚Apple Watch Series 6 ｜ ⌚Apple Watch SE

🍎Amazon公式 Apple製品ページ
🔥Amazon公式 Apple製品限定セールページ

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

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

link
visited
hover
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