:focus クラス
:focus クラスは、エレメントが入力待ちまたは操作待ちになったら、設定されたスタイルを反映する擬似クラスです。
主に、<a>、 <input>、 <select>、 <textarea> といった操作待ち、入力待ちになるエレメントが対象になります。
似た疑似クラスに:focus-withinクラスがあります。:focus-withinクラスは、子エレメントに入力待ち、操作待ちがあるならスタイルを反映します。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
該当するものはfocus(onfocus)イベントです。
スタイルを反映したい場合は擬似クラスを利用したほうが簡易です。
in HTML
in JavaScript
詳しくはfocus(onfocus)イベントを参照して下さい。
Example
:focusの例です。分かり難いですが、入力待ちになると枠線が表示されます。
関連する CSS 疑似クラス
関連する CSS 疑似クラスには以下のものがあります。
疑似クラス | 概要 |
---|---|
:focus | 入力待ちまたは操作待ちになったら |
:focus-visible | フォーカスが可能と判断されたら |
:focus-within | 入力待ちまたは操作待ちになったら |