CSS :focus-within 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

:focus-within 疑似クラス CSS プロパティとは

トピック:フォーカスを持っている要素、またはフォーカスのある要素を表する事ができる言い換えると、それ自身を apseudoクラス、または子孫が :focusに対応する要素を持つ要素として表す (シャドウツリーの子孫も含まれる)

疑似クラス :focus-within

実例 コード 1

サンプル コードを試す
  • form:focus-within {
  •     background: yellow;
  • }

CSSコード:例

    div:focus-within{
       background: red;
    }

    /* 子孫要素の一つにフォーカスがある <div> を選択 */

構文

:focus-within { css : properties ; }
 疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
    情報:
  • このセレクターは、<input> 欄の一つにユーザーがフォーカスを置いたときに、それを含む <form> を強調する場合に便利 。

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
:focus-withinChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯60サポートなしフルサポート◯52サポートなしフルサポート◯47フルサポート◯10.1

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
:focus-withinAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯60フルサポート◯60サポートなしフルサポート◯52フルサポート◯47フルサポート◯10.3サポートなし
:focus-within 疑似クラス 関連記事
CSS :focus-within 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS :focus-within 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS