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.1 回答者： taloo 回答日時： 2014/06/22 17:05

キーボードのタブキーを使ってフォーカスを当ててみてください。

chromeは、クリック操作ではフォーカスが当たらないか、clickの後にフォーカスが外れるようです。

代替案はJavaScriptで特定のclassを付けるなどでしょうか。CSSだけでは思いつきません。

この回答へのお礼

お返事ありがとうございます。
そうですね、クリックした時に一瞬だけ大きい画像が表示されるのですが、すぐに消えてしまって何故だろうと思っていました。

CSSだけでは難しいということですので、少し苦手ですがJavaScriptで対応してみます。
ありがとうございました。

お礼日時：2014/06/22 18:12

No.2 回答者： ORUKA1951 回答日時： 2014/06/22 17:22

＞サイト内でとあるサムネイルをクリックした時に、

　ポインターを乗せたときは、:hover、クリックでアクティブなときは:active擬似要素ですよ。focusはキーボードなどで対象となったときです。
よって、ナビゲーション内のリンクでしたら
nav ol li a:visited{}
nav ol li a:link{}
nav ol li a:focus,nav ol li a:hover{}
nav ol li a:active{}
とこの順番、(:linkと:visitedは排他的ですから順不同)
で記述します。HTML4の場合はdiv.nav ol li:linkですかね。

　ちゃんとしたものを参考にしましょうね。

この回答へのお礼

お返事ありがとうございます。
focusは本来タブキーとかで対象に取った時の挙動なのですね。
参考にしたサイトだとクリックで対象に取った時に表示するような説明でしたので、勘違いしてしまいました。

今後気をつけていきます。

お礼日時：2014/06/22 18:07

No.3 回答者： ORUKA1951 回答日時： 2014/06/23 09:38

No.2です。

ですからactiveだけに指定すれば良いです。
同じ優先順位、詳細度でしたら後出のもので上書きされます。chromeはactiveだとfocusでないと排他的に解釈しているだけです。
a{display:inline-block;width:10em;text-align:center;}
a:link{background-color:red;}
a:visited{background-color:yellow;}
a:focus{background-color:lime;}
a:hover{background-color:aqua;}
a:active{background-color:black;}

とすると、キーボードでタブやショートカットキー(ALT+A)などで移動したりして試すと良いでしょう。
<p><a href="./A.html" accesskey="A" tabindex="1">A</a></p>
<p><a href="./R.html" accesskey="J" tabindex="2">J</a></p>
<p><a href="./J.html" accesskey="R" tabindex="3">R</a></p>
<p><a href="./W.html" accesskey="W" tabindex="4">W</a></p>

スタイルシートを身につけるときは、プロパティなどよりまず先に
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
を徹底的に身につけましょう。

　だったら、そもそも、
<div id="album">
<ul>
<li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li>

そんなHTML書かなくてもCSSだけで良いですよね。これじゃ検索エンジンに意味通じないし・・

No.4 回答者： taloo 回答日時： 2014/06/23 16:20

フォーカスについてちょっと調べてみたのですが、

http://msdn.microsoft.com/en-us/library/ie/ms534 …
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/i …


推測ですが、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だけが特殊だと思いますけどね。
（全てのブラウザが異なる仕様のもとで動作しているそれぞれに正しい動作です。）