: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 | × |