:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。
要素にフォーカスである場合に一致する擬似クラスである :focus とよく似ていますが、:focus はフォーカスを持つ要素のみに適用される点で異なります。
よくある例としては、フォームの入力欄のいずれかの要素に対してフォーカスが当たったときに、フォーム全体を目立たせることができます。
<button type="button">フォームの外</button>
<form>
<div>
<label for="name">名前</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">email</label>
<input type="email" id="email" />
</div>
</form>
<button type="button">フォームの外</button>form {
display: flex;
flex-direction: column;
max-width: 80%;
gap: 8px;
}
form:focus-within {
background-color: yellow;
}
button {
margin-top: 8px;
margin-bottom: 8px;
}下記の Codepen で実際の動作を確かめて見てください。
