chromeでの擬似クラス:focus について

質問

現在ホームページを作成中です。
cssで擬似クラス「:focus」を使った時の挙動について困っているので質問させて頂きます。

CSSを使って、サイト内でとあるサムネイルをクリックした時に、そのサムネイルの横に大きく画像を表示させようと思っています。

http://c-brains.jp/blog/wsg/08/06/27-210059.php

こちらのサイトを参考にして作ったところ、FirefoxやIEでは期待したとおりに動いてくれたのですが、chromeでは残念ながら反応がありませんでした。
そこで何が原因かを調べるために、簡単なところから解決していこうと思い

htmlに

<a href="#">あいうえお</a>

と記載し、cssに

a:link {
color:black;
}

a:focus {
color:white;
background:blue;
}

と、記載してみた処、リンクをクリックすればFirefoxやIEでは期待したとおりに文字色や背景色が変わりますが、chromeでは反応がありませんでした。
chrome自体が「:focus」に対応してないのかと思い、色んなサイトで調べてみましたが、数年前の記事では対応しているように見えました。（最近の記事は見つかりませんでした）

そこで質問です。もしかして、バージョンが上がって、chromeでは「:focus」に対応しなくなったのでしょうか。

回答No.4

神崎 渉瑠（@taloo）

フォーカスについてちょっと調べてみたのですが、
http://msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
MSDNによると、<a>要素は「focus可能」と「tabStop可能」の２つのプロパティを持ち、「<a>はデフォルトで両方がyes」になっています。

MDNでは言及されていないようです。
Webkitはどこに書かれているのかわかりません。。。 http://trac.webkit.org/wiki

W3Cのドキュメントにも、<a>や<input>などをクリック操作、タブキー操作したときのデフォルト動作として、focusについての言及はないようです。
http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-tabindex

推測ですが、Webkitのみ「<a>はデフォルトでfocus可能要素であり、クリックではfocusしないがtabキーでfocus可能」となっていて、
Webkit以外が、「<a>はデフォルトでfocus可能要素であり、クリックでもtabキーでもfocus可能」となっているようです。

<input>は全てのブラウザで、デフォルトでfocus可能要素であり、クリックでもtabキーでもfocus可能となっているようでした。

W3Cの言語仕様にも書かれていないため対処療法（今後のブラウザアップデートで動作が変わる可能性がある）となりますが、tabindexを指定してみてください。
この方法なら、JavaScriptではなくHTMLで指定できるようです。

<a href="#" tabindex="0">

tabstopの操作を指示する物ですが、多くのブラウザがtabstopとfocusを連動しているようです。
また、webkitに関しては、<a>をクリックをした時のフォーカス処理をどう扱うかが変わるようです。

tabindexを0にすると、HTMLに書かれている順番通りにtabstopの順番が決定されます。（tabstopの動作はtabindexを書かない時と同じままで、focusの動作のみが変わる。）

===============
検証
<a href="#" tabindex="0">anchor-0</a>
<a href="#" tabindex="0">anchor-1</a>
<a href="#">anchor-2</a>
<a href="#">anchor-3</a>
<a href="#">anchor-4</a>

anchor-1をクリックしてtabキーを押すとanchor-2がフォーカスされるので、anchor-1のクリックによりanchor-1にフォーカスが当たった事が確認できます。

しかし、anchor-3をクリックしてtabキーを押すとanchor-0がフォーカスされるので、anchor-3のクリックではanchor-3にフォーカスが当たっていない（全ての要素からフォーカスが外れる）ことが確認できます。

スタイルシートで a:focus{} を指定しておけば、フォーカスに合わせてスタイルが適用されることも確認できます。

-----------
Netscape、Gecko（Firefox）、Trident（IE）、Presto（旧Opera）、フィーチャーフォンなどの動作から考えれば、Webkitだけが特殊だと思いますけどね。
（全てのブラウザが異なる仕様のもとで動作しているそれぞれに正しい動作です。）