aタグの擬似クラスの記述順を守ろう

aタグで使われる擬似クラスは、クセが少しありルールを知らないと間違えたことすら気がつきにくい性質がございます。それぞれの擬似クラスの特徴をおさえた上で、正しいルールで使うことをご紹介します。

難しいと感じた方は、最後の結論だけ読んでもらったら大丈夫です。

代表的なaタグの擬似クラス

aタグで使われる擬似クラスの代表的なものは、下記のものになります。

:link	未訪問
:visited	訪問済み
:hover	マウスなどが要素と重なった時
:focus	要素にフォーカスされた時
:active	要素がクリックされるなど、アクティブになった時 （クリックされてから、クリックが解除されるまで）

/* 訪問済みのリンク */
a:link {
  color: red;
}

/* 未訪問のリンク */
a:visited {
  color: blue;
}

/* マウスを重ねた時 */
a:hover {
  color: green;
}

/* フォーカスされた時 */
a:focus {
  color: lightgreen;
}

/* アクティブになった時 */
a:active {
  color: pink;
}

擬似クラスの順番が違うとうまくいかない

aタグの擬似クラスがうまくいかない時は、ほとんどの場合で擬似クラスをつける順番が間違っていることが原因です。

CSSは詳細度が同じ場合、後から記載した値が上書きされます。

例えば、下記の順番の場合どうなるでしょう？

/* マウスを重ねた時 */
a:hover {
  color: green;
}

/* 未訪問のリンク */
/* hoverを上書きしてしまいます */
a:link {
  color: red;
}

/* 訪問済みのリンク */
/* hoverを上書きしてしまいます */
a:visited {
  color: blue;
}

この場合は、aタグにマウスを重ねても、a:hoverのcolorのプロパティの値（green）が全く効きません。なぜなら、a:hoverの後に記載された、未訪問のリンクのa:linkや訪問済みのリンクのa:visitedのcolorの値に上書きされてしまうためです。

このように、擬似クラスの順番を意識して指定していきましょう。

説明がよくわからない時は、これだけ覚えて！

いろいろ説明はしてみましたが、とりあえず以下の３つだけ覚えておけば大丈夫です。

• aタグの擬似クラスの意味
  link（未訪問）visited（訪問済）hover（カーソル乗せた時）focus（フォーカス時）active（クリック最中）
• aタグの擬似クラスの記述順
  （ link → visited → hover → focus → active ）
• aタグの擬似クラスの記述はまとめて記述する
  （離れたところにあると忘れる）