: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 プロパティやセレクタを逆引きできます。

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
背景

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

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

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

このページの上部へ