: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 | ○ |