擬似クラス「:link」の需要についた回答が少し気になったので、調べていたのですが理解出来ない挙動があったので教えてください。

:link の挙動に関して、以下の記述があります。

:link - MDN

CSS の :link 疑似クラスは、まだ訪問されていない要素を表します。 <a>, <area>, <link> など、 href 属性を持つ未訪問のすべての要素を選択します。

質問

同ページに以下の例があります。
なぜ、訪問後の link の background-color が gold になるのでしょうか？

html
1<a href="#ordinary-target">これは普通のリンクです。</a><br>
2<a href="">このリンクを訪問しました。</a><br>
3<a>リンクのプレイスホルダー（スタイルの適用なし）</a>

CSS
1a:link {
2  background-color: gold;
3  color: green;
4}

例の説明としては以下が記述されています。

既定では、大半のブラウザーが訪問済みのリンクに特殊な color の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 background-color の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

:link 疑似クラスは、まだ訪問されていない要素への設定だと思うのですが、説明を素直に読むと、:link が訪問後のリンクの装飾にも影響を及ぼしています。

CSS :link の値 < ブラウザの既定値 < CSS :visited の値
の優先順位のようです。

ブラウザの挙動としては想定どおりみたいですが、どういった原理に則っているのでしょうか？

よろしくお願いいたします。

おかしな挙動の追記

*確認した環境は、「firefox 66.0.3」+「codepen」です。

本件の挙動確認をしていたのですが、a:link でbackground-colorを設定しない場合、a:visited のbackground-colorが反映されませんでした。
MDN にある「上書き～」な記述はこれのことなんですかね？
にしては、colorは反映されていて、意味がわからんのですけど。

CSS
1a:link {
2  background-color: gold;
3  color: green;
4}
5
6a:visited {
7  background-color: black;
8  color: red;
9}

CSS
1a:visited {
2  background-color: black;
3  color: red;
4}

think49

2019/04/21 13:06

初心者マークが付いていますが、te2jiさんは初心者ではないとずっと思っていました…。

退会済みユーザー

2019/04/22 00:10

質問作るときにだれに回答してもらうか想定して作るんですけど、そのうちの一人が初心者マークあったほうが見てくれるだろうと判断してつけました。ちなみに CSS はよく分かっていない初心者ですｗ

行動規範の内容に同意します

回答4件

:link, :visited の定義順

昔からある注意事項ですが、「:link, :visited は順番を意識して定義しなければ、期待通りの表示にならない」という決まり事がありました。

:link :visited 順番 - Google 検索

大抵のサイトでは、状態が上書きされるので順番を守ろうというものです。
改めて考えてみると、これはおかしな話で「未訪問」「訪問済」の状態は排他的なので、本来はどちらを先にしようとも上書きされないはずです。

仕様

8.2. リンク履歴疑似クラス： :link, :visited - Selectors Level 4 （日本語訳）

スタイルシート作者が利用者の同意なしに利用者が訪問済みのサイトを調べる目的に， :link ／ :visited 疑似クラスを濫用することも可能なので、 UA は，リンクを訪問済みか未訪問かに応じて異なるように具現化しつつ，利用者のプライバシーを守るために、すべてのリンクを未訪問のリンクとして扱うなど, 他の措置を実装してもよい。
【例えば多くのブラウザでは、 :visited に適用し得るスタイルは，レイアウトも含め，他のどの状態にも影響しないもの（ほぼ色のみ）に限られている（参考）。】

というわけで、すべてのリンクを未訪問のリンクとして扱うが機能している可能性があります。
このロジックなら、

CSS
1a:link {}
2a:visited {}

の順番で記述しないと期待通りに動作せず、逆順定義で a:link が a:visited を上書きする挙動になります。

MDN

MDNに気になる一文があります。

:link - CSS: カスケーディングスタイルシート | MDN

既定では、大半のブラウザーが訪問済みのリンクに特殊な color の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 background-color の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

これはWebブラウザが有するデフォルトスタイルシートで a:visited が指定されていた場合、製作者スタイルシートの a:link 宣言よりも優先させる事を表していると思われます。
しかし、CSS仕様におけるカスケ―ド規則では優先順位が逆で、制作者スタイルシートはデフォルトスタイルシートよりも優先されます(詳細は下記仕様および過去ログを参照して下さい)。

検証

Google Chrome 73.0.3683.103で下記HTMLを開いて検証しました。

HTML
1<style>
2a:link {
3  background-color: gold;
4  color: green;
5}
6</style>
7</head>
8<body>
9<a href="#ordinary-target">これは普通のリンクです。</a><br>
10<a href="">このリンクを訪問しました。</a><br>
11<a>リンクのプレイスホルダー（スタイルの適用なし）</a>

<a href="">このリンクを訪問しました。</a> の訪問済みリンクに対して、Google Chrome Developper Toolsの [Styles] タブでは、下記の制作者スタイルシートを全て有効と判定しました。

CSS
1a:link {
2  background-color: gold;
3  color: green;
4}

しかし、実際にはGoogle Chromeの内部で設定された訪問済みリンク色で出力されました。
(このスタイルは開発者ツールに表示されませんでした)

結論としては、次の挙動になっていると想定出来ます。

a:link は a:visited を包含する(未訪問+訪問済の状態を表し、全てのリンクを表す)
カスケード法処理完了後、独立した訪問済みスタイル上書き処理が走っており、制作者スタイルシートで a:visited で宣言されなかったプロパティはWebブラウザが内蔵する訪問済みスタイル(デフォルトスタイルシート)に上書きされる

おかしな挙動の追記

本件の挙動確認をしていたのですが、a:link でbackground-colorを設定しない場合、a:visited のbackground-colorが反映されませんでした。
...(中略)...
CSS
1a:visited {
2  background-color: black;
3  color: red;
4}

Google Chrome 73.0.3683.103で再現する事を確認しました。
開発者ツールの [Styles] タブで background-color: black; は有効な状態でしたが、実際の描画には反映されていません。
前述の「検証」節で仮定した動作に照らし合わせると、下記の仮説を立てることが出来ます。

「カスケード処理」では有効
カスケード処理後の「訪問済みスタイル上書き処理」で background-color: black; が無効化されている

仕様上の「利用者のプライバシー云々」は、background-image を併用する事でブラウザ履歴を盗み取れる事実が露見した事を受けての規定と記憶しています。

ここで background 全体を封印する修正が加えられたなら、一応、辻褄は合います。
(background-image と background: url() だけを封印すればいいはずなので、個人的にはどうかと思いますが…)

Re: te2ji さん

投稿2019/04/21 12:48

編集2019/04/22 12:40

think49

総合スコア18194

退会済みユーザー

2019/04/22 00:14

回答ありがとうございます。挙動ですが、検証している中、ますますおかしいモノが出てきました。。。後ほど、質問に追記しますので御覧ください。どっかで定義されてそうな挙動なんですけど、どこなんでしょうね＾＾；

退会済みユーザー

2019/04/22 00:55

追記した内容、「すべてのリンクを未訪問のリンクとして扱う」に一部合致するように思いますが、それでも釈然としないものがあります。なにかご存知であればお願いします。

think49

2019/04/22 12:41

親記事に追記しました。＞おかしな挙動の追記

think49

2019/04/22 12:44

仮説は立てましたが、仕様ではなく、実装の問題のようなので、FirefoxやChroniumuのソースコードを読まない事には確かな事はいえないと思います。しかし、私には読めません。

退会済みユーザー

2019/04/22 13:33

ご確認ありがとうございました！仮説、大変興味深く読みました。私は Firefox で確認しましたが、Firefox の開発ツール上では「a:link」のみが表示され、「a:visited」は登場しませんでした。が、表示は「a:visited」の物となっていたので、結果としては、多分同じ挙動になっているのだと思います。 > background 全体を封印する修正が加えられたならこちらは、「a:link」に「background-color」があると「a:visited」も反映されるので、封印されているのとは少し違う挙動な気がします。私もソースコードは読めないので、もう少し資料を漁ってみますが。。。カオスですねｗ

行動規範の内容に同意します

文章として雑で申し訳ないですが、回答を作りました。

##考察(結論)
リンクはすべて:linkとして処理された後で、ブラウザで:visitedを追加(上書き)で処理していると考えられる。さらに厄介なことに、「:visitedとは」にあるように「no color or be transparent」であるものは、:visitedで設定しても反映されない。反映させたければ、「a, a:link, a:any-link」のどれかで適当な設定を行った後、:visitedを記述する必要がある。

本回答は、検証から実装を推測したものです。
根拠ドキュメントや実装に関して補足していただけると大変助かります

#以下、考察に至った経緯
##:link とは
:link :visited

All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited.

Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

##:visited とは
:visited

Properties that would otherwise have no color or be transparent cannot be modified with :visited. Of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector.

##CSSの優先順位
カスケード法

遷移宣言 [css-transitions-1]

important にされた UA 宣言
important にされた利用者宣言
important にされた作者宣言
アニメーション宣言 [css-animations-1]
通常の作者宣言
通常の利用者宣言
通常の UA 宣言

##:visited に適用可能なプロパティ

color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color

##主要ブラウザのデフォルトCSS
デフォルトCSSをまとめてくれていたページ

##検証
###検証時に使用した基本コード
以下のコードをベースにブラウザでの見え方を確認。
*確認した環境は、「firefox 66.0.3」+「codepen」

html
1<a href="#new">new link</a><br>
2<a href="">visited link</a><br>

css
1a:link::after{content: "(:LINK)";}
2a:visited::after{content: "(:VISITED)";}
3a:link {
4  border: solid 1px;
5}
6a:visited {
7  background-color: black;
8  color: black;
9  border-color: black;
10  border-bottom-color: black;
11  border-left-color: black;
12  border-right-color: black;
13  border-top-color: black;
14  column-rule-color: black;
15  outline-color: black;
16}

上記のイメージを見るとわかるが、:visitedも:link と判断されている。
ブラウザによる差異はあるかもしれないが、これが:linkの CSS が:visitedに適用される原因と思われる。

実際に Firefox では、処理が重い時:linkの CSS で描画された後、:visitedで上書きされる様子が観測できる。
またその際、(探しきれていないだけかもしれないが)デフォルト CSS として定義もされていない color が反映されている。
＊明らかに CSS の優先順位に記述のない処理が走っている。

visited の確認には時間がかかるので遅延反映は初期描画速度を上げるための工夫ではないかと考えられる。セキュリティ観点で visited の実装に幅ができたことが逆にブラウザのおかしな挙動につながっている気がする。

投稿2019/04/29 08:22

退会済みユーザー

総合スコア0

リンク先の質問に回答した者です。ベストアンサーではありませんが、もし私の回答を見てのことであればすみません。
質問者様が参考になさったMDNの解説の以下の部分ではないでしょうか。

少なくとも同等の仕様を持つリンク関連の疑似クラス（:active、:hover、 :visited）によって上書きされます。

上書きということは、:linkで定義した内容が保持されるということだと思います。
W3CによるCSSの仕様書には、擬似クラス:linkと:visitedは相互排他的であると書いてあるので、こんな挙動があるとは知りませんでした（^^;）。

投稿2019/04/21 12:35

ta1g3n

総合スコア35

退会済みユーザー

2019/04/22 00:20

回答ありがとうございます。 ta1g3n さんの回答がトリガーの一つです。 *実は以前から少し気になっていて、質問に記述した「擬似クラス「:link」の需要」を見に行ったときに、検証と違う回答があったので質問しました。自身でも少し検証したのですが、頂いた回答とも違う動きをするようです。。。後ほど、質問に追記するので、お時間のあるときに見ていただけると幸いです。

行動規範の内容に同意します

デフォルトで設定されているのでは？

参考：
:any-link

投稿2019/04/21 12:18

yoshinavi

総合スコア3525

退会済みユーザー

2019/04/21 12:20

回答主旨が理解できないのですが、どういった回答なのでしょうか？

yoshinavi

2019/04/22 01:19

他の回答にもあるように、W3Cに「:link」「:visited」は「相互に排他的」なんてあるのが、混乱の原因かと思います。しかし、実際の挙動は明らかに「:link」が優先されており、提示のコードを「a:visited」に変えても、背景色は付きません。「a」または「a:link」で一旦、背景色を設定しないと「a:visited」は有効になりません。もともと「:link」「:visited」は「相互に排他的」と言いながら、実はそうではなく、「:link」ありきになっているのが現状なので、仕様のひとつと納得するしかないかと思います。「float」が「overflow:hidden;」で解除できるのと同じく「仕様」と割り切ることに近いかな？と思います。ここでW3Cは「:any-link」を登場させ、「a:link」の設定で「a:any-link」も一部デフォルトで設定させることで、辻褄合わせを行っているのでは？と思っています。意味不明な回答でスミマセン。結論は「よく分からないけど、仕様なので納得しましょう」かなと･･･個人的な感想です。 (^^;)

退会済みユーザー

2019/04/22 01:28

非常に示唆に富んだコメント、ありがとうございます。＊回答へ転記とかしてもらうことは可能でしょうか？すげぇもったいないです！ > ここでW3Cは「:any-link」を登場させ、「a:link」の設定で「a:any-link」も一部デフォルトで設定させることで、辻褄合わせを行っているのでは？と思っています。 think49 さんの提示してくれた「8.2. リンク履歴疑似クラス： :link, :visited - Selectors Level 4 （日本語訳）」のブラウザ実装と絡んで、なんかいろいろおかしな状況を作り出しているのかもしれないですね。こちらでももう少し追ってみます！

yoshinavi

2019/04/23 15:53

「追記」の部分ですが、自分なりに推測して、たどり着いた結論（妄想？）ですが･･･ W3Cの人は頭が良いので、いろんな方向から定義しており、その中に数学的な解釈もあるのでは？と思いました。「:visited」を「リンク先へ訪問済み」と、定義する場合に、必ずリンク先は「未訪問」が前提となります。これを「0」の状態として、何らかのbackground等を設定すれば「1」であり、設定しなければ「0」のままです。（color等除く）よって「:visited」で色んな設定をしても、元が「0」なので、どんな数字を掛け算しても「0」、つまり、「a:visited {background-color: black;}」のスタイルは「無効」となるのでは？「think49」さんの回答にもある「ブライバシー保護」が最有力だと思いますが、上記の計算上の考えも当てはまる気がしてきました。･･･やっぱり妄想の気が･･･ (^^;)

退会済みユーザー

2019/04/25 08:09

こちらのコメント、参考になりました。根拠となる資料が探せないのが残念です。コード読めると一番いいのでしょうけど私では力及ばず＾＾；コメント内容を含めて、後日考察をまとめてみますね。ありがとうございます！

行動規範の内容に同意します

あなたの回答