備忘録的プログラミングリファレンス

:focus クラス

 :focus クラスは、エレメントが入力待ちまたは操作待ちになったら、設定されたスタイルを反映する擬似クラスです。

 主に、<a><input><select><textarea> といった操作待ち、入力待ちになるエレメントが対象になります。

:focus クラス
a:focus{
	background-color: silver;
}

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

 似た疑似クラスに:focus-withinクラスがあります。:focus-withinクラスは、子エレメントに入力待ち、操作待ちがあるならスタイルを反映します。

構文(Syntax)

CSS

HTMLElement:focus {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。

 該当するものはfocus(onfocus)イベントです。
 スタイルを反映したい場合は擬似クラスを利用したほうが簡易です。

in HTML

<tagelement onfocus="oneFunction()">

in JavaScript

object.onfocus = function(){ };

object.addEventListener("focus", script_);

 詳しくはfocus(onfocus)イベントを参照して下さい。

Example

 :focusの例です。分かり難いですが、入力待ちになると枠線が表示されます。