【CSS】:has()擬似クラスの使用例

  • URLをコピーしました!

hasとは引数の中で指定した条件(少なくとも1つ以上)を含んでいる要素をチェックできる擬似クラスです。実際にどういう場面で利用できるのか気になったので調べました。

例えば、直下にdiv要素を持つdl要素の場合、以下のようになります↓

<style>
dl:has(> div) {
/*style*/
}
</style>

<dl>
 <div>
   <dt>...</dt>
   <dd>...</dd>
 </div>
</dl>
目次

使用例

ul要素内でhoverされていない全てのa要素を選択

See the Pen Untitled by ユイト (@mikiprogram) on CodePen.

こちらの動きは、ul:hover a:not(:hover){} と指定しても可能です。hasを使わなくてもできます。

項目「その他」を選んだときに現れる入力エリア

Ahmad ShadeedさんのCodepenから引用↓

See the Pen CSS :has – Other field by Ahmad Shadeed (@shadeed) on CodePen.

イライラ棒

web.devさんのCodePenから引用↓

See the Pen Do you :has a steady hand? 👋 [Pure CSS Game] by web.dev (@web-dot-dev) on CodePen.

私はどうなっているのか全く分かっていません。

その他の例

他の使用例は、以下の記事から確認してください↓

実際のサイトでの使用例

実際のサイトでは、どんな場面で使用されているか気になり調べてみました。

【公式】一棟貸しの絶景ヴィラ|十八楼 離れ「宿いとう」|岐阜

/*該当コード一部*/
.btn a:has(.icon-pdf) {
  padding-left: 56px;
}

Neko Health

/*該当コード*/
[data-ui=PaneItem] [data-testid=Media]:has(img) {
    display: none
}

Future Explorations | 100BANCH

/*該当コード*/
[class*=Futures_futures]:has([class*=IndexItem_link]:hover) .CloseUpCursor_closeUpCursor__zZ3Su {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

ブラウザ対応状況

記事執筆時点(2023/07/11)では、Firefox以外の主要なブラウザは対応しています。

まとめ

現状ではFirefoxが未対応で、Safariも15.4から対応なので実案件に使用するのは先になりそうです。

私はhasを使わないといけない例が思いつかず、「それって無理やりhas使ってるやん!」という例しか思いつきませんでした。

もっと使用例ググって勉強します。

参考

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次