CSS Reference

:focus-within

フォーカスを持った要素を含む要素にスタイルを適用する

:focus-within 疑似クラスは、フォーカスされている、あるいはフォーカスされた要素を含む要素にスタイルを適用します。

つまり、要素自身が :focus 疑似クラスに該当する場合、子孫に :focus 疑似クラスに該当する要素がある場合が対象です。

:focus-withinのサンプルソース

form:focus-within {
  background-color: yellow;
}

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome