【CSS】:visitedが効かない原因5選

:visitedはユーザーが訪問したリンクに対して変更するCSSの疑似クラスです。

「訪問したらaタグを変化させたいのにvisitedが効かないんだけど!?」

:visitedが効かない原因を5つ紹介します。

【原因1】効くCSSが限られている

:visitedで指定できるCSSは下記だけです。

訪問前のaタグ

訪問後visited

<style>
a{
    color: #333;
    background: #EEE;
    border: 5px solid #333;
    outline: 5px solid #999;
    text-decoration: underline 3px #666;
}
a:visited{
    color: #dd0000;
    background-color: #ffff9f;
    border-color: red;
    outline-color: #0027ff;
    text-decoration-color: #15b500;
}
</style>
<a href="example.html">訪問前のaタグ</a><br><br>
<a href="">訪問後visited</a>

:visitedでは色を変えることくらいしかできないようになっています。

:visitedはユーザーの訪問履歴がわかってしまうため、プライバシーを守るためCSSを制限しているようです。

「a:visited span」のように:visitedが直接指定されていない、:visitedの子要素であっても効くCSSは上記だけです。

また、効いてるけど色が似ていて効いていないように見えることもあるかもしれません。カラーコードを全然別の色にして確認してみましょう。

【原因2】元のaにCSSが指定されていない

「background-color」「border-color」「outline-color」が効かないのは元のaタグにそのCSSを指定していないからです。

訪問前のaタグ

訪問後visited

<style>
a{
}
a:visited{
    /*効く*/color: #dd0000;
    /*効かない*/background-color: #ffff9f;
    /*効かない*/border-color: red;
    /*効かない*/outline-color: #0027ff;
    /*効く*/text-decoration-color: #15b500;
}
</style>
<a href="example.html">訪問前のaタグ</a><br><br>
<a href="">訪問後visited</a>

これは元のaタグでカラーコード「transparent」（透明）を指定されているためです。

transparentを指定されていると:visitedで色を指定しても効きません。

元のaには「#FFF」（白）など背景色と同じ色を指定しましょう。

【原因3】アルファ値は無視される

rgbaはアルファ値を指定して半透明にできる色の指定方法です。

:visitedではアルファ値がいくつであろうと無視され、半透明になりません。

アルファ値1.0　visited

アルファ値0.1　visited

<style>
a.example3:visited{
    color: rgba(255, 0, 0, 1.0);
}
a.example4:visited{
    color: rgba(255, 0, 0, 0.1);
}
</style>
<a href="" class="example3">アルファ値1.0　visited</a><br><br>
<a href="" class="example4">アルファ値0.1　visited</a>

指定したい色をスポイトなどで取得してアルファ値を使わず指定しましょう。

【原因4】優先度が負けている

:visitedがあるセレクタが元のaのセレクタより優先度が低いと効きません。

<style>
.example5 a:visited{
    color: #dd0000;
}
.example5 a.example6{
    color: #333;
}
</style>
<div class="example5">
    <a href="example.html" class="example6">訪問前のaタグ</a><br><br>
    <a href="" class="example6">訪問後visited</a>
</div>

元のセレクタと同じセレクタに:visitedをつけて優先度を上げましょう。

:visitedを後述するのも有効です。

<style>
.example7 a.example6:visited{
    color: #dd0000;
}
.example7 a.example6{
    color: #333;
}
</style>
<div class="example7">
    <a href="example.html" class="example6">訪問前のaタグ</a><br><br>
    <a href="" class="example6">訪問後visited</a>
</div>

【原因5】訪問していない、リンク先がない、訪問履歴をOFFにしている

:visitedは訪問したことがあるリンクに対して働きます。

訪問したことがなければ当然効きません。一度クリックして訪問しましょう。

また、リンク先がないときも効きません。リンク先を直すか、リンクを丸ごと消しましょう。

ブラウザの設定で訪問履歴をOFFにしても効かないことがあります。これは個人の設定ですので対策はできません。

自分のブラウザの場合は訪問履歴はONにしてみましょう。

その他の原因について、下記は:hoverが効かない原因です。:visitedと似た要素ですので何か見つかるかもしれません。

【まとめ】:visitedが効かない原因

• 【原因1】効くCSSが限られている
  →色に関するCSSだけ指定できる
• 【原因2】元のaにCSSが指定されていない
  →元のaにtansparent以外のカラーコードを指定する
• 【原因3】アルファ値は無視される
  →rgbaを使わないで指定する
• 【原因4】優先度が負けている
  →優先度を上げる
• 【原因5】訪問していない、リンク先がない、訪問履歴をOFFにしている
  →訪問する、直す

以上、:visitedが効かない原因5選でした。