CSS3：:focus-visible疑似クラス

`E`	該当させる要素。

:focus 疑似クラスは、常に、現在フォーカスを得ている要素に合致するが、ユーザーエージェントが可視になるよう（“フォーカス環”を描くなどにより）フォーカスを指示するのは、様々な経験則を利用して、利用者にとって最も助けになると決定したときに限られる。:focus-visible 疑似クラスは、これらの状況に限り、フォーカスを得ている要素に合致する ― それは、フォーカス指示子がいつ現れるかを変更することなく、当のフォーカス指示子の外観を変更することを作者に許容する。

この例では、フォーカス可能などの要素も、:focus-visible に合致するときは太く黄色い外形線を取得することに加え、特にリンクは，黄色い背景も取得する。これらのスタイルは、ページを全体を通して一貫する、かつ、太くされたスタイル付けに因り容易に可視になるが、ページフォーカスがどこに在るか利用者が解する必要があると見込まれない限り、現れない。

:root {
  --focus-gold: #ffbf47;
}

:focus-visible  {
  outline: 3px solid var(--focus-gold);
}

a:focus-visible {
  background-color: var(--focus-gold);
}

<SPAN class=Test>テスト</SPAN><BR>
<A class=Test href="#A">テスト</A><BR>
<BUTTON class=Test>テスト</BUTTON><BR>
<INPUT class=Test><BR>

スクリプト：

スクリプト：

CSS3

疑似クラス

:focus-visible

関連

テスト