:focus-visible クラス

　:focus-visible クラスは、フォーカスが可能と判断されたら、スタイル設定を反映する疑似クラスです。

:focus-visible

input:focus-visible{
	outline: 3px solid yellow;
}

詳しくは Example を参照してください

　フォーカスされる機能をもつ <a> エレメントや <FORM> 部品が対象になります。

　　似た疑似クラスに :focus クラスがありますが、ポインターデバイスによるクリックでのフォーカスと、タブ移動でのフォーカスでは動作に違いがあります。 <a> エレメント、<FORM> 部品によっても違いがあります。
　詳しくは、 Example の後の説明を参照してください。

構文(Syntax)

HTMLElement:focus-visible {
  style_propaty: value;
	...
}

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

　:focus-visible クラスの例です。

　フォーカスされる機能をもつ <a> エレメントや <FORM> 部品が対象になります。

　ポインターデバイスによるクリックでのフォーカスと、タブ移動でのフォーカスでは動作に違いがあります。 <a> エレメント、<FORM> 部品によっても違いがあります。

HTML内容

CSS内容

　Google Chromeにおいては以下のようになりました。

　<a>エレメントにおいてのポインターデバイスによるクリックでは、:focusクラスが反映されます。
　タブ移動では、:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。

　<input>エレメントにおいてのポインターデバイスによるクリックでは、:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。
　タブ移動においても:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。