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

:focus-within クラス

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

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

:focus-within 例

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

ページ内 Index

構文(Syntax)

CSS

HTMLElement:focus-within {
  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-withinの例です。分かり難いですが、入力待ちになると枠線が表示されます。