:focus-within
:focus-within
は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が :focus
擬似クラスに該当するか、子孫に :focus
に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)
css
/* 子孫要素の一つにフォーカスがある <div> を選択 */
div:focus-within {
background: cyan;
}
このセレクターは、よくある例のように、 <input>
欄の一つにユーザーがフォーカスを置いたときに、それを含む <form>
全体を強調する場合に便利です。
構文
:focus-within
例
この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。
HTML
html
<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
css
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 4px;
}
結果
仕様書
Specification |
---|
Selectors Level 4 # the-focus-within-pseudo |
ブラウザーの互換性
BCD tables only load in the browser