CSS Reference

:has()

指定した要素を持っているかを判断してスタイルを適用する

:has() 疑似クラスは、引数としてセレクタを指定することで、指定された要素が、そのセレクタに一致する要素を持っている場合にマッチさせることができます。

例えば、子孫に img 要素を持つ div 要素にマッチさせたければ下記のように記述できます。

div:has(img) {
  background-color: lightgray;
}

a 要素のうち、子要素（孫要素は除く）として img 要素を持っているものにマッチさせたい場合は下記のように記述します。

a:has(> img) {
  border: 1px solid red;
}

また、下記のように記述することで、直後に p 要素を持つ、h2 要素にマッチさせるといったことも可能です。

h2:has(+ p) {
  margin-bottom: 0;
}

あるいは、他の疑似クラス、例えば、:not() 疑似クラスと組み合わせることも可能です。

見だし要素を持たない section 要素にマッチさせたいなら下記のような記述方法が使用できます。

section:not(:has(h1, h2, h3, h4, h5, h6)) {
  ...略...
}

一方で下記のように記述すれば、section 要素のうち、見だし要素以外の要素を含むものにマッチします。

section:has(:not(h1, h2, h3, h4, h5, h6)) {
  ...略...
}

:has()のサンプルソース

div:has(img) {
  background-color: lightgray;
}

/*
  a 要素のうち、子要素として img 要素を持っているものにマッチ
*/

a:has(> img) {
  border: 1px solid red;
}
/*
  h2 要素のうち、直後の要素として p 要素が存在しているものにマッチ
*/

h2:has(+ p) {
  margin-bottom: 0;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○+15.4
iOS Safari ○+15.4
Android Chrome ○

関連する疑似クラス

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

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

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

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome