擬似クラスを勉強する時に、最初に出てくるのが「a要素」なので、「擬似クラスの栄養素」と個人的には考えているのですが、a要素に使う擬似クラスってhoverくらいしか使わないことが多いですね。

なので、あまり深く理解している人が多くないかもしれないので、a要素で使われる擬似クラスについて、改めてキチンと説明していきたいと思います。

擬似クラスとは？

W3Cによって勧告されている情報によると、擬似クラスとは、「文書ツリーの範囲外にある情報や単体セレクタでは表現できないものを選択できるようにした概念」であるとなっています。

英語訳なので、分かりにくいかもしれませんが噛み砕いて表現すると「特定の要素に特定の状態を付与したセレクタ」ということになります。

擬似クラスの記述例

input {
  background: #fff;
}
input:focus { /* 入力項目が入力可能になった状態 */
  background: #ff0;
}
ul li:nth-child(2) { /* ul要素の2番目の子要素 */
  width: 200px;
}

擬似クラスの種類

擬似クラスには、いくつかの種類があります。

今回紹介する「a要素の擬似クラス」については、そのうちの動的擬似クラスになります。

他にもあるので、ここで一通り紹介しておきます。

動的擬似クラス

要素の名前、属性、内容以外のHTMLの文書上に現れない状態を表現しています。

a:hover { /* リンク部分にマウスポインタが乗っている状態 */
  opacity: 0.7;
}
input:focus { /* 入力項目が入力可能になった状態 */
  background: #ff0;
}

ターゲット擬似クラス

ページ内リンクなどでターゲットとなっている要素を条件として表します。

例えば、https://hogehoge.com/index.html#sec01 のような場合に、#sec01がターゲット要素になります。

section#sec01:target { /* #sec01がターゲット要素としてURIから参照されている */
  color: #f00;
}

言語情報擬似クラス

その要素が何語で書かれているかを条件にして表したものです。

html:lang(ja) { /* HTML文書が日本語で書かれていた場合 */
  color: #000;
}

UI要素状態擬似クラス

UI要素（input/select/textareaなど）の状態を条件として表します。

input[type="radio"]:checked { /* ラジオボタンがチェックされている状態 */
  font-weight: bold;
}
button:disabled { /* button要素が無効状態にある場合 */
  color: #ccc;
}

構造擬似クラス

単体セレクタや結合子を使っても表現できない状態を表します。

tr:nth-child(even) { /* table要素の奇数行目のtr要素 */
  background: #cff;
}
div p:first-child { /* div要素の最初の子要素p */
  text-indent: 1em;
}
section h2:nth-of-type(2) { /* section要素内のh2要素のうち2番目のh2 */
  color: #00f;
}

否定擬似クラス

ある特定条件を否定する要素すべてを表します。

input:not([type="radio"]) { /* input要素のうち、type属性がradio以外のすべての要素 */
  background: #fff;
}
*:not(div) { /* div要素以外のすべての要素 */
  border: solid 1px #ccc;
}

a要素で使われる擬似クラス

一般的にa要素で使われる擬似クラスは、前述の動的擬似クラスになります。

もちろん場合によっては、他の擬似クラスを使うこともあるのですが、a要素の特性としてリンクを表すため、リンクに関係する部分が擬似クラスとして扱われます。

未訪問リンク

まだリンク先に訪問していない（リンクをクリックしていない）状態を表します。

a:link {
  color: #00f;
}

訪問済みリンク

リンクを踏んで、リンク先を訪問した後の状態を表しています。

a:visited {
  color: #f0f;
}

マウスオーバー（ホバー）状態

リンク部分にマウスポインタが乗っている状態を表しています。

a:hover {
  color: #aaa;
}

リンク実行時

リンク部分をクリックして、リンクが実行されている状態を表しています。

a:active {
  color: #000;
}

a要素の擬似クラスは順序が大事！！

CSSは、上の行から順番に処理されていくので、記述順に左右されることがあります。

例えば、

p {
  color: red;
}
p {
  color: blue;
}

と書いてしまった場合、p要素に適用される文字色は「赤色」が実行された後に「青色」が実行されるので、結果「青色」になります。

したがって、a要素の擬似クラスも順序が大事になってきます。

a:active { /* リンク実行時 */
  color: black;
}
a:hover { /* マウスオーバー時 */
  color: gray;
}
a:visited { /* 訪問済みリンク */
  color: magenta;
}
a:link { /* 未訪問リンク */
  color: blue;
}

このような順番でソースコードが書かれていた場合を考えてみると…

リンク実行時に黒色になるが、マウスポインタが乗っている状態も兼ねている為、グレーになります。

しかも訪問済みもしくは未訪問どちらかの状態に必ずなっているので、最終的にはマゼンタか青色になります。

つまり、上記の場合はどの状態であっても常にマゼンタか青色になってしまうということです。

正しい順序は、

a:link { /* 未訪問リンク */
  color: blue;
}
a:visited { /* 訪問済みリンク */
  color: magenta;
}
a:hover { /* マウスオーバー時 */
  color: gray;
}
a:active { /* リンク実行時 */
  color: black;
}

このようになります。

まとめ

結論として、a要素の擬似クラスは「:link」「:visited」「:hover」「:active」の順番で記述しなくてはいけません。

覚え方として、「LoVe & HAte」（愛と憎しみ）という言葉で、擬似クラスの頭文字の並び順を覚えておくと分かりやすいと思います。

なんともインパクトのある言葉ですが、その分忘れにくいと思うので、参考にしていただければ幸いです。