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

/* 子孫要素の一つにフォーカスがある <div> を選択 */
div:focus-within {
  background: cyan;
}

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

構文

:focus-within

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

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

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

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

input {
  margin: 4px;
}

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:focus-within の定義
草案 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 60Edge 未対応 なし
補足
未対応 なし
補足
補足 This feature is not implemented. See the enhancement request.
Firefox 完全対応 52IE 未対応 なしOpera 完全対応 47Safari 完全対応 10.1WebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 This feature is not implemented. See the enhancement request.
Firefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 10.3Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,