擬似クラスfocus-within
擬似クラス focus-within は、フォーカス内にある
要素にスタイルを設定します。
要素自体にスタイルを設定する擬似クラス focus とは異なり、
focus-within は親要素のスタイルを設定します。
構文
セレクター:focus-within {
}
例
子要素のinputがフォーカスされたときに、 親要素の背景色を水色に設定してみましょう:
<div>
あなたの名前を入力してください: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
関連項目
-
不定状態のトグルにスタイルを設定する擬似クラス
:indeterminate -
デフォルトの要素にスタイルを設定する擬似クラス
:default -
フルスクリーンモードの要素にスタイルを設定する擬似クラス
:fullscreen -
プレースホルダーテキスト表示時の要素にスタイルを設定する擬似クラス
:placeholder-shown -
入力欄のテキストカーソルの色を設定するプロパティ
caret-color
