Closed5
CSS has
ユイト🍓ブラウザ状況
対応済
- ✅Chrome105~
- ✅Edge105~
- ✅Safari15.4~
- ✅Opera91~
未対応
- ❌Firefox未対応
参考
firefox対策
ユイト🍓参考サイト
ユイト🍓一言で言うと
引数の中で指定したセレクタを含んでいる要素を指定
親要素に少なくとも1つの要素が含まれているかどうか、あるいはフォーカスが当たっているかどうかなど、1つの条件が含まれているかどうかをチェックできます
ユイト🍓使用例
親要素を選択
*:has( > .child) {...}
<div><!-- ターゲット -->
<div class="child">子要素</div>
</div>
複数の子要素
.parent:has(h1,h2,p)::before
<div class="parent">
<!-- ::before ターゲット -->
<h1>h1要素</h1>
<h2>h2要素</h2>
<p>p要素</p>
</div>
前の兄弟要素
*:has( + .brother) {...}
<p>ターゲット要素</p>
<p class="brother">兄弟要素</p>
figure要素の子要素にfigcaptionがある場合
figure:has(figcaption) {...}
<figure>
<img src="example.jpg" alt="">
<figcaption>キャプションがあるとき〜！わははは！</figcaption>
</figure>
hasが使われているWebサイト
このスクラップは2023/07/08にクローズされました