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 の定義
草案 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応60 なし152 なし4710.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応6060 なし1524710.3 なし

1. This feature is not implemented. See the enhancement request.

関連項目

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

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