【CSS Tips】:visitedに指定した色が効かないと思ったら、アルファチャンネル（色の透明度）が原因だった

Last updated at 2024-09-24Posted at 2022-05-14

これは何

aタグの:visitedに色を指定したのに効かなかった時に調べてもパッと答えが出てこなかったので記録しておきます。

ズバリ指定している色にアルファチャンネルを指定していたからでした。

MDNを見ると以下のように記載されています。

利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の :visited 状態ではないものが代わりに使用されますが、アルファチャンネルが 0 であった場合は、 :visited で設定されたスタイルセットは全体的に無視されます。

私が詰まっていた時は

デフォルト時： rgba(0, 0, 0, 0.87)
:visitedの時： rgba(0, 0, 0, 0.6)

のように色を指定していました。

/* こんな感じ */

.textlink {
  color: rgba(0, 0, 0, 0.87);
}
.textlink:visited {
  color: rgba(0, 0, 0, 0.6);
}

この時:visitedで指定されているアルファチャンネル0.6が無視されて全体の0.87が採用されます。
さらに指定しているRGB値は同じだったため、結果としてリンク訪問前後で色が変わらないようになっていました。

:visitedではアルファチャンネルを使わない色に置き換えて指定すれば色が変わります。