2
Help us understand the problem. What are the problem?

posted at

updated at

Organization

:visitedの色を変更したいのに効かない原因はアルファチャンネルかも

これは何

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ではアルファチャンネルを使わない色に置き換えて指定すれば色が変わります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?