プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
CSS、リンクタグを装飾する際の「a」「a:link」「a:visited」「a:hover」「a:active」の記述順序について
結論から書くと、上から順番に

(1.「a」)
2.「a:link」
3.「a:visited」
4.「a:hover」
5.「a:active」

※「a」と「a:link」&「a:visited」はどちらか一方の指定でOK

の順番で書きましょう。

知っている人からすれば「そんなの当たり前じゃん」なのですが、
瞬間的にハマったので、自戒の念を込めて、メモっておきます。

昨日、作りかけのWebサービスの動作確認をしていたのですが、
訪問済みのリンクをマウスオーバーしても文字色が変わらないってな事態に遭遇しました。

な、何でだ(--?

ほんであれやこれやと調査をしたのですが、興味無いと思うので飛ばします。
結論を書くと、スタイルの指定順序に問題がありました。

元々のスタイル指定が、例えばこんな風に書かれていたのですφ(--)

a {
    color: #000;
}

a:hover {
    color: #c00;
    text-shadow: 1px 8px 5px rgba(128, 0, 0, 0.3);
}

a:visited {
    color: #666;
}

この指定は、要するに

リンクの文字色を「#000」にしてね~。
あっ、でもマウスが上に乗っていたら「#c00」にするよ。
それが既に押したことのあるリンクだったら、やっぱり「#666」にしてね。


と指示しています。後優先です。

そのため、マウスオーバーの「#c00にしてね」より訪問済みの「#666にしろよ」が優先されていて
訪問済みのリンクをマウスオーバーしても文字色が変わらない事態になっていました。

訪問済みのリンクをマウスオーバーした際に文字色を変えたい場合は

a {
    color: #000;
}

a:visited {
    color: #666;
}

a:hover {
    color: #c00;
    text-shadow: 1px 8px 5px rgba(128, 0, 0, 0.3);
}

のように「a:hover」を「a:visited」より後ろに書いてあげる必要があります。

これで私が遭遇した問題も解決しました。

(1.「a」)
2.「a:link」
3.「a:visited」
4.「a:hover」
5.「a:active」

※「a」と「a:link」&「a:visited」はどちらか一方の指定でOK

の順番は、決まり文句として覚えちゃっても良さそうですね。

ただし、CSS3で追加されたアイツ

text-shadow

については、単純な後優先ではありません。
興味がある方は

CSS、「a」「a:link」「a:visited」「a:hover」「a:active」に対する「text-shadow」の適用順序について

の記事をご覧ください。

取りあえず、そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事