プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
CSS、「a」「a:link」「a:visited」「a:hover」「a:active」に対する「text-shadow」の適用順序について
最初に注意事項があります。
本記事に記載している内容は、すべて私の環境で検証した結果です。
根拠となる資料は見つけていませんので、ご了承ください。

なお、検証にはGoogle Chromeのバージョン36.0.1985.143 mとやらを使っています。

それでは書いていきます。

CSS、リンクタグを装飾する際の「a」「a:link」「a:visited」「a:hover」「a:active」の記述順序について

の記事を書くためにCSSの適用順序を検証していたのですが、

text-shadow

の適用順序がよく分からなくなったので整理してみました。

まず最初に用意した検証用のサンプルはこれですφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
/***
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}
****/

a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);

}
-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

未訪問時は青文字で青の影、訪問済みは緑文字で緑の影、マウスオーバーで赤文字で赤の影、
クリック時には黄色文字で黄色の影となることを想定していました。

ところがどっこい、いきなり見た目がこんな感じに……φ(--;

20140821-01.png


おいおい、訪問済みのリンクも影が青いよ(--;

訪問済みリンクの文字は緑色ですが、影が青です。
どうやら訪問済みリンクにも未訪問時の影が適用されているようです。

じゃあ、未訪問時の影の指定を解除すればOK(--?

そう考えた私は、未訪問時の「text-shadow」を消して、このようにしてみましたφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
/***
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}
****/

a:link {
    color: #00f;

/***
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
****/

}
a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

結果(--)b

影自体が無くなった\(--)/

20140821-02.png


ということはアレですか。

「a:link」に書いた「text-shadow」の指定が
「a:visited」に書いた「text-shadow」の指定を上書きしたのではなく、
「a:link」に書いた「text-shadow」の指定が訪問済みリンクにも適用されてるってことですか(--?

事象から見るとそうなのですが、なんか腑に落ちません(--ゞ
試しに「a:visited」と「a:link」の順番を入れ替えて

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
/***
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}
****/

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

のように書いてみたのですが、結果は同じでした。
「a:link」に書いた「text-shadow」の指定が訪問済みリンクにも適用されていますφ(--)

20140821-03.png

書く順番は関係無いのですね(--ゞ

じゃあさ、もういっそのこと「a:visited」に書いた「text-shadow」の指定以外全部消そう!
半分やけくそで、こんなんしてみましたφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
/***
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}
a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}
****/

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

/***
a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}
a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}
****/

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

ダメでしたφ(--)

20140821-04.png


未訪問リンクの色が青いのは、スタイルが適用されたわけじゃなくて
単にブラウザのデフォルトが未訪問時は青だからです。
「検証用CSSの書き方失敗したな~」と思ったのですが、
差し替えるのが面倒なのでこのまま進みます。
※コメント化したスタイルが適用されたわけじゃないことは、別途確認しています。

さて、これは結論付けなくてはいけなそうです。

「a:visited」に書いた「text-shadow」は役立たずっぽい

ですね。マジで?!Σ( ̄◇ ̄;

次に「a」と「a:link」を比較してみました。
普通はこの2つを同時に書くことは無いはずですが、書いちゃう人もいると思うので。

確認用のCSSはこんな風に記載しましたφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}

a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

結果(--)b

「a:link」の勝ちφ(--)

20140821-05.png


ちょっと分かり難いですが「a:link」で指定した青い影が付いています。
「a」と「a:link」の順番を入れ替えて、こんなんしてもφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

結果は変わらずφ(--)

20140821-06.png


ただし「a:link」の指定を消してこんなんするとφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}

/***
a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}
***/

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

こんな風に「a」で指定したスタイルが適用されましたφ(--)

20140821-07.png


「a」で指定した黒い影が付いていますね。

なるほど。分かりました。

「a」は、役立たずではないけど「a:link」に負ける

です。

次はマウスを乗せたときの挙動とクリックしたときの挙動を見てみます。

マウスオーバー時はこんな感じφ(--)

20140821-08.png


リンククリック時はこんな感じφ(--)

20140821-09.png


マウスオーバーとリンククリック時の挙動については想定通りでした。

「a:hover」と「a:active」の順番を入れ替えて

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>

<style type="text/css">
<!--
/***
a {
    color: #000;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 1);
}
****/

a:link {
    color: #00f;
    text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a:visited {
    color: #0f0;
    text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:active {
    color: #ff0;
    text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

a:hover {
    color: #f00;
    text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

のように記述したところ、クリック時も赤文字&赤い影にφ(--)

20140821-10.png


マウスポインタが写っていないので分かり難いですが、クリックした瞬間です。

これは単純に、後優先で「a:active」の指定を「a:hover」の指定が上書きしているのでしょうね。
つまり

「a:hover」と「a:active」は後に書いた方が優先される

です。

取りあえずは、そんなところでしょうか。

最後にもう一度まとめておきますね。

今回検証した限りは、リンクの「a」タグに対する「text-shadow」の指定は

1.「a:visited」に書いた指定は無視されるっぽい
2.「a」と「a:link」では、記述順序に依らず「a:link」が優先される
3.「a:hover」と「a:active」では、後に書いた方が優先される


となります。
なお、あくまで「text-shadow」の指定についてです。
リンクの文字色については、普通に後優先でした。

気が向いたら、他のブラウザでも検証してみます。

※2014/09/01追記
ブラウザ毎の検証を行いました。
詳細は「ブラウザ毎の「a:link」「a:visited」「a:hover」「a:active」に対する「text-shadow」の適用を検証してみた。」の記事をご覧ください。

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

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

  関連記事