CSS

Cascading Style Sheets :focus-within selector.

:focus-within

　CSSの :focus-within疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が :focus疑似クラスに該当するか、子孫に :focusに該当する要素がある要素を表します。(これはシャドウツリーにおける子孫も含みます。)

子孫要素の一つにフォーカスがある <div> を選択


div:focus-within {
	background: orange;
}

　このセレクターは、よくある例のように、<input> 欄の一つにユーザーがフォーカスを置いたときに、それを含む <form> を強調する場合に便利です。

使用例

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

このフォームに入力してみてください。


HTML source


<p>このフォームに入力してみてください。</p>
<form>
	<label for="given_name">名前:</label>
	<input id="given_name" type="text">
	<br>
	<label for="family_name">苗字:</label>
	<input id="family_name" type="text">
</form>

CSS source


form {
	border: 1px solid;
	color: gray;
	padding: 4px;
}

form:focus-within {
	background: #ff8;
	color: black;
}

input {
	margin: 4px;
}