CSS :focus-within 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
:focus-within 疑似クラス CSS プロパティとは
トピック:フォーカスを持っている要素、またはフォーカスのある要素を表する事ができる言い換えると、それ自身を a:pseudoクラス、または子孫が :focusに対応する要素を持つ要素として表す (シャドウツリーの子孫も含まれる)
疑似クラス :focus-within
実例 コード 1
サンプル コードを試すform:focus-within {background: yellow;}
CSSコード:例
div:focus-within{
background: red;
}
/* 子孫要素の一つにフォーカスがある <div> を選択 */
構文
:focus-within { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| :focus-within | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯60 | サポートなし✖ | フルサポート◯52 | サポートなし✖ | フルサポート◯47 | フルサポート◯10.1 |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| :focus-within | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯60 | フルサポート◯60 | サポートなし✖ | フルサポート◯52 | フルサポート◯47 | フルサポート◯10.3 | サポートなし✖ |
