:link、​:visited、​:hover、​:active の​記述順序と​その​覚え方

スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: yellow;
}

実はこの 4 つの擬似クラスの記述順序には注意が必要で、

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

の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。

なぜこの順番じゃなければダメなのか？

実践 Web Standards Design には、次のように書かれています。

:hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効にならない点に注意してください。

--「3 章 3.3/CSS 管理のコツ」より

擬似クラスの記述順序には注意が必要です。（略）常に最後の指定で上書きされるということに注意し、link、visited、hover、active の順番で記述しておくと問題ないでしょう。逆に、すでに訪問済みのリンクは背景画像を変えたくないということであれば、visited を最後に記述するとよいでしょう。

-- 「7 章 16/背景画像を利用して訪問済みリンクを一工夫する」より

擬似クラスの記述順序にルールがあるというのを知ったのは、実はこの本がきっかけでした。それまでは「hover が効かない！」とか「訪問済みのリンクの色が変わらない！」とかいった問題に出くわしてハマッた経験が何度かあったので、書く順番が原因だったことがわかったときは思わず「そうだったのか！」とひざを打ってしまいました。

で、勢いづいてもう少し調べてみると、CSS の権威である Eric Meyer 氏のサイトでも同じ内容に関する解説を見つけました。

🔗 Link Specificity – meyerweb.com

カンタンにまとめてみると、

  • セレクタの固有性（specificity）は 4 つとも同じ。
  • なので、最後に書かれたものから優先的に適用される。
  • 例えば、link、active、hover、visited の順番で記述しているとすると・・・
  • 未訪問リンクの場合は、active を hover が打ち消すので active は無効になる。
  • 従って、active は hover の後ろに記述しなければならない。
  • 訪問済みリンクの場合は、active も hover も一番最後の visited が打ち消してしまって無効になる。
  • 従って、visited は hover や active の前に記述しなければならない。
  • つまり、link、visited、hover、active の順番で書くべし。
  • ちなみに、link と visited は打ち消しあうことがないので順番はどっちでも OK。
  • link はあくまで「未訪問（unvisited）」のリンクのみに適用される擬似クラスで、「リンク全般」に適用されるものじゃないので要注意。
  • link じゃなくて unvisited にすればいいのにね。

順番の覚え方

海外では、この記述順序ルールを link-visited-hover-active の頭文字をとって「LVHA」と言うようです。ちょっと覚えづらいなぁと思っていたのですが、たまたま見かけた海外のブログにうまい覚え方が紹介されていました。

🔗 How To Remember The Order of Selectors: LOVE and HATE – CSS Tricks

Just think 'LOVE' (LV) and 'HATE' (HA)....

LOVE and HATE かぁ。ちょっと意味深だし覚えやすいですね。