:focus-within クラス

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

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

:focus-within 例

別窓で表示します。

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

構文(Syntax)

HTMLElement:focus-within {
  style_propaties;
}

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

　該当するものはfocus(onfocus)イベントですが、イベントが発生した親エレメントを取得する必要があります。
　スタイルを反映したい場合は擬似クラスを利用したほうが簡易です。

<tagelement onfocus="oneFunction()">

object.onfocus = function(){ };

object.addEventListener("focus", script_);

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

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