:has()

:has() は CSS の疑似クラスで、引数として渡されたセレクターに (指定された要素の :scope の相対で) 該当する要素が一つ以上の要素に一致することを表します。

:has() 疑似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 document.querySelector() のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。

/* <img> 要素を直接中に含む <a> を選択する */
/* なお、これはまだブラウザーが対応していません */
var test = document.querySelector('a:has(> img)');

構文

:has( <relative-selector-list> )

where
<relative-selector-list> = <relative-selector>#

where
<relative-selector> = <combinator>? <complex-selector>

where
<combinator> = '>' | '+' | '~' | [ '||' ]
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

次のセレクターは、 <img> を直接子に持つ <a> 要素のみに一致します。

a:has(> img)

次のセレクターは、直後に <p> 要素を持つ <h1> 要素のみに一致します。

h1:has(+ p)

仕様書

仕様書 状態 備考
Selectors Level 4
:has() の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:has()Chrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 669058
Edge 未対応 なし
補足
未対応 なし
補足
補足 See bug 669058
Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 418039
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 418039
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。