CSSの訪問済みリンクの色で、ボタンの白文字が暗くなった。原因はa:visitedの詳細度でした

公開 2026.10.20約3分で読めます

TL;DRこの記事の要点

目次6項目

受託のLPで、ボタンの白い文字が、なぜか一部だけ暗くなっていました。
しかもマウスを乗せると、緑になる。
原因は、サイト共通CSSのa:visitedとa:hoverが、ボタンの指定より強かったことでした。
直し方は、ボタン側にも:visitedと:hoverの色を書くことです。

🎥 この記事の内容は動画でも解説しています。

一度開いたリンクのボタンだけ、文字が暗い

気づいたのは、確認でLPを見ていたときです。
同じデザインのボタンが並んでいるのに、1つだけ文字が暗い。
マウスを乗せると、今度は緑。
デザインにはない色です。

よく見ると、暗いのは、前に一度クリックした外部リンクのボタンでした。
つまり「訪問済みリンク」の色が付いていたんです。

原因の調査と修正は、Claude Codeにやらせてます。

このLPは、サイト共通のCSSの上に乗っています。
共通CSSと、LPのボタンの指定は、こんな形でした(クラス名と色は変えています)。

/* サイト共通のCSS */
a:visited { color: #666; }
a:hover { color: green; }

/* LPのボタン */
.c-button { color: #fff; }

CSSは、同じ要素に複数の指定が当たると、「詳細度」が高いほうを使います。
詳細度は、(ID, クラス・疑似クラス, 要素名)の数を、左から順に比べます。
真ん中の数が同じなら、右の要素名の数で決まる、という感じです。

a:visitedは、疑似クラス1つ+要素名1つ。
ボタンの.c-buttonは、クラス1つだけ。
なので、書いた順番に関係なく、a:visitedのほうが勝ちます。

まだ開いていないリンクには:visitedが当たらないので、白のまま。
一度開いたリンクのボタンだけ暗くなる、というわけでした。

ボタンの指定に、:visitedと:hoverも足してもらいました。

.c-button,
.c-button:visited,
.c-button:hover {
	color: #fff;
}

.c-button:visitedは、クラス1つ+疑似クラス1つで、0,2,0。
共通CSSのa:visited(0,1,1)より強くなるので、訪問済みでも白のままです。
ホバーも同じで、緑になりません。

共通CSSのほうを直す手もあります。
ただ、そっちはほかのページのリンクにも効くので、影響の範囲が広くなります。

これ、ちょっと気づきにくいところがあります。

まず、ブラウザでリンクを開いたことがない状態では、再現しません。
まっさらな状態で画面を確認すると、全部のボタンが白く見えます。

それに、MDNによると、プライバシー保護のため、JavaScriptのgetComputedStyleで色を読んでも、:visitedの色ではなく、未訪問のときの色が返ってきます。
コードで色を読んで確かめる方法だと、白と判定されてしまうんです。

なので今回は、実際のブラウザでリンク先を一度開いてから戻って、見た目で確認させてます。

💡 :visitedで変えられるのは色だけ

MDNによると、:visitedで変えられるのはcolorやbackground-color、枠線の色など、色に関係するプロパティだけです。文字の大きさや太さは変わりません。

一度開いたリンクのボタンだけ文字が暗くなったのは、共通CSSのa:visited(0,1,1)が、ボタンの.c-button(0,1,0)より強かったから
ボタン側に.c-button:visitedと.c-button:hover(0,2,0)を書けば、白のまま
未訪問の状態では再現せず、getComputedStyleでも訪問済みの色は読めないので、実際に開いてから戻って確認する

見つけるまでが、けっこう大変なやつです。
共通CSSの上にLPを乗せるときは、最初にリンクの色の指定を見ておくのがよさそうです。

この記事が参考になったら、応援クリックをお願いします

Cat's Handこの記事を書いた人

Web制作歴10年以上。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。