CSS の :has() 疑似クラスは、引数として渡されたセレクターに (指定された要素の :scope の相対で) 該当する要素が一つ以上の要素に一致することを表します。
:has() 疑似クラスは、セレクターのリストを引数に取ります。現在の仕様書では、 live selector profile の一部として示されておらず、すなわちスタイルシートの中で使用できません。 document.querySelector() のような関数の中でのみ使用できます。
/* <img> 要素を直接中に含む <a> を選択する */
/* なお、これはまだブラウザーが対応しておらず、 */
/* スタイルシート内で動作することも意図していません */
var test = document.querySelector('a:has(> img)');
構文
:has( <relative-selector-list> )
例
次のセレクターは、 <img> を直接子に持つ <a> 要素のみに一致します。
a:has(> img)
次のセレクターは、直後に <p> 要素を持つ <h1> 要素のみに一致します。
h1:has(+ p)
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Selectors Level 4 :has() の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 未対応 なし | Edge 未対応 なし | Firefox
未対応
なし
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android
未対応
なし
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。