:focus-within クラス

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

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

:focus-within

label:focus-within{
	outline: 1px green solid;
	background-color: rgba(0,168,11,0.6);
}

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

　似た疑似クラスに :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 の例です。分かり難いですが、入力待ちになると枠線が表示されます。